How do I make the image zoom out when hovering rather than zoom in as it is now? I am using the Enterprise theme.
This is used in our media grid section on the homepage.
Thanks in advance 
N
Topic summary
A user needed to reverse the default zoom behavior on their Enterprise theme’s media grid section—making images zoom out on hover instead of zooming in.
Initial Solution:
- Adding CSS to scale images down to 0.90 on hover worked but created empty space around the images.
Final Solution:
- Set the default image scale to 1.1 (110%) so images start slightly enlarged.
- On hover, scale down to 0.95, creating a smooth zoom-out effect while maintaining full coverage.
- CSS code added to the end of main.css file via Shopify Admin → Online Store → Themes → Edit Code → Assets → main.css.
Status: Resolved. The implementation successfully achieved the desired zoom-out effect without visual gaps.
1 Like
@Nick_S2 -
please add this css to the very end of your main.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → main.css
.gallery-block:hover .media {transform: scale(0.90) !important;}
Thank you. Yes this worked however I think the image should start at 110% or something - so that it still fills the space when scaled down…
Check my site again to see what I mean. Thanks. N
1 Like
Hello @Nick_S2
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open main.css and add your CSS code at the end
.gallery-block .media {
transform: scale(1.1);
transition: transform 0.5s ease;
will-change: transform;
}
.gallery-block:hover .media {
transform: scale(0.95);
}
