Issue: On a Shopify collection page with a hover zoom effect, the image container expanded at the bottom during hover, even after using overflow: hidden. The goal was to keep the container size fixed while zooming the image.
Guidance: Support advised adding CSS in theme.liquid (placed above ) and, critically, applying overflow: hidden to the image’s container rather than to the image element itself. This ensures the scaled image is clipped within the container and prevents layout expansion.
Implementation: Steps provided—Online Store > Themes > More actions > Edit code > theme.liquid—then paste the CSS before .
Outcome: The change resolved the issue; the user confirmed the fix works. No further actions or open questions were noted; the thread is resolved.
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!
Hi @HannaSak
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the 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
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
Hi Richard, this did the trick! Thank you so much for your help!