Hover on zoom effect for product images in featured collection section

[HannaSak]

Hello Shopify Community, 

I am using the Impact theme, and I'm looking to incorporate a hover-on-zoom effect for product images that are shown on a collection page (so they are like the product thumbnails). If you hover over the images on this page on my site: https://bambooliving.com/pages/condos there is a hover-on-zoom effect that I'm looking to achieve. This effect is built-in to some of the sections in the Impact theme, but not for product images. I'd like to implement this effect when hovering over the products on the following two pages on my site: https://bambooliving.com/pages/cabinets and https://bambooliving.com/pages/interior-doors 

Any input would be greatly appreciated! Thank you in advance!

[PaulMartin]

Hi Hanna,

I checked the reference page you mentioned ( https://bambooliving.com/pages/condos ) and I don't see the effect. If I hover on them, nothing happens.

The only other effect I found is this:

Do you mean this effect? or is there a different effect?

Regardless, to have a zoom-on-hover effect in your images, you'll need your current theme's code to be edited so that it can support such feature. The approach you could go for would be to understand how your theme implements the effect, then, replicate it so that it's (1) consistent with your theme in terms of design and (2) integrate well with your theme so that nothing will break

Hope this gives you a direction and if you have any questions, feel free to ask 🙂

And if you need help with coding, I’d be happy to assist for a flat fee of $20. Let me know if you're interested.

[HannaSak]

Hi Paul, thanks for your reply! 

Sorry, looking back on my post, I was a bit unclear with what I'm looking for. When you hover over the images in the reference page (https://bambooliving.com/pages/condos), there should be a zoom in/zoom out effect. It's a subtle animation that makes the images look like they're "breathing". Is this not showing up for you? This is the effect that I'm trying to replicate for the product thumbnails on the "featured collection" section that's on these pages: https://bambooliving.com/pages/cabinets & https://bambooliving.com/pages/interior-doors

[PaulMartin]

Hi Hanna,

Thank you for clarifying it! I get what you mean now.

Yeah, unfortunately, it's not showing up for me in the https://bambooliving.com/pages/condos. However, it is showing up in the product thumbnails for the "featured collection". See video attached: Video for Hanna - YouTube

What device are you using? It might be because of browser compatibility or having a different OS. I'm using Microsoft Edge with Windows 11.

[HannaSak · Accepted solution]

Hi Paul, 

Thank you for bringing that to my attention and for even making a video! I'm using Chrome with Windows 11. I am glad it's working on the thumbnails for the "featured collection" though, because that is exactly what I was trying to achieve when I made this post. I was able to figure that out so no need to help me find a solution anymore! I added the code below to theme.css:

Thank you so much anyway for your willingness to help and for creating that video for me! That was very helpful. 

Best wishes, 

Hanna 

[PaulMartin]

You're welcome!

That's awesome! Glad you were able to come up with a solution for it 🙂