Zoom in on hover without changing the image container size

[HannaSak]

Hello Shopify Community, 

If you click on the link to my site: https://bambooliving.com/collections/all-home-models you will notice that I have a zoom on hover effect implemented for the images. I want the zoom to work without the image container size changing, so I used the { overflow: hidden; } CSS property which only partially worked. For whatever reason, the image container is expanding, but ONLY at the bottom of the image.  Does anyone have a fix for this? 

Thank you in advance for your help!

[PageFly-Richard · Accepted solution]

Hi @HannaSak 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product-card__figure {
overflow: hidden;
}
</style>

The overflow hidden should be added to the container itself, not the image

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[HannaSak]

Hi Richard, this did the trick! Thank you so much for your help!