How can I get Hover effect on multicolumn images - Dawn

[VicexGrips]

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

shop - circle6.co

[laddisahsi · Accepted solution]

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 </head> tag.

<style>
.multicolumn-card__image-wrapper .media { transition: transform .5s; }
.multicolumn-card__image-wrapper .media:hover { transform: scale(1.1); }
</style>

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

Laddi

[Dan-From-Ryviu]

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); }

[laddisahsi · Accepted solution]

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 </head> tag.

<style>
.multicolumn-card__image-wrapper .media { transition: transform .5s; }
.multicolumn-card__image-wrapper .media:hover { transform: scale(1.1); }
</style>

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

Laddi

[VicexGrips]

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 

[VicexGrips]

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

[Dan-From-Ryviu · Accepted solution]

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;
}