How can I get Hover effect on multicolumn images - Dawn

Store Design
, , , , , ,
1

how can I make the images zoom or shrink when hovering over multicolumn images

shop - circle6.co

2

Hi @VicexGrips

Please add this code to Custom CSS of the multiple columns section

.multicolumn-card__image-wrapper .media { transition: transform .5s; }
.multicolumn-card__image-wrapper .media:hover { transform: scale(1.1); }
3

Hi @VicexGrips

You can follow the following steps:

  1. Please go to the Online Store.
  2. Then Edit Code.
  3. Please find the theme.liquid file.
  4. Please add code before closing the tag tag.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

4

it works! but it makes it bigger rather than shrink

or maybe we can do a smoother animation like this? https://dev4sb-test.nimbusweb.me/share/6816404/egeiouc12avwz68hb4i6

5

actually It looks good just the image overlaps sometimes how can we fix that?

6

You can do that by update code like this

.multicolumn-list__item.center .media--adapt img { 
left: 0 !important; 
transform: unset !important;
transition: transform .5s;
}
.multicolumn-card .multicolumn-list__item.center .media--adapt:hover img {
transform: scale(1.5) !important;
}