Create Hover effect on Product listings. Modular theme

Store Design
1

Hello, I am hoping to implement the hover function on my product listings. Can someone help me with how I do this? Thanks

2

Hi @KateC-M
https://themes.shopify.com/themes/modular/styles/mayfair/preview

there is already a hover effect on the shop page. Kindly share the link so we can assist you a better way.

Thanks
Ahir

3

Thanks. Yes on my home page there is, but I’d like it to work on the product listings and I can’t work out how to do it? https://caffeineandmachine.store/collections/c-m-collection

4

Hi @KateC-M

body.template-collection .fade-in.lazyloaded:hover {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.1);
}
body.template-collection .fade-in.lazyloaded{ transition: transform 2s !important; }
body.template-collection .collectionGrid .collectionGrid-row.row > .block {
overflow: hidden;
}

Try this CSS. you can add the above code in the theme css.

Thanks
Ahir