How to swap image zoom in to zoom out?

[Nick_S2]

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.

anteck.com.au

Thanks in advance

N

[suyash1]

@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;}

[Nick_S2]

@suyash1

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

[devcoders]

Hello @Nick_S2

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. 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);
}

[Nick_S2]

@devcoders

Worked perfectly. Thanks for your help!

N