Hover to zoom on product page images

Store Design
, ,

Topic summary

A user seeks help implementing a hover-to-zoom feature on product page images for their Sahara theme store, providing an example from a competitor’s website.

Initial Attempts:

  • TerenceKEANE provided CSS code to add to the base.css file:
.product__media .media:not(.media--thumb) img:hover {
  transform: scale(1.2);
}
  • The code creates a basic zoom effect by scaling the image, but doesn’t replicate the exact functionality shown in the example.

Current Status:

  • The CSS solution makes images bigger on hover, but not in the desired way.
  • TerenceKEANE explains the competitor’s implementation uses custom code (likely ‘zoom.js’) and isn’t achievable through simple CSS alone.
  • The discussion concludes that a full custom implementation would be needed to match the example’s zoom behavior.
  • The issue remains unresolved without custom development work.
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Could someone please help me with the coding to add the zoom on hover feature on product page images?

Im using Sahara theme.

example of hover to zoom: https://www.lornajane.com.au/speed-circuit-no-chafe-ankle-biter-leggings-acblu/022423_ACBLU.html

TIA

2

Hi,

Currently, when you hover over the product images with your mouse, you can see it zooms in. Or did you want a zoom button?

Terence.

3

Hi Terrence,

The link provided is an example of what I want for my website. This is not my website.

4

Hello, Please share your live store’s frontend URL or Preview link.

5

What you want can be done. What’s the link to your website?

Terence

1 Like
6

Hi,

preview link below:

https://hxs20p8v6zmjmtsy-80707387720.shopifypreview.com

7

the previous link: https://hxs20p8v6zmjmtsy-80707387720.shopifypreview.com

1 Like
8

preview*

9

To be honest, the competitor’s website has done this with a custom implementation. Alternatively, the website itself might support this feature. It’s usually done using ‘zoom.js’. The code I’m going to send you might not fully meet your needs, but it creates a similar zoom effect. Of course, this issue can also be solved with a custom implementation.

The following code will do what you want. You can change the values as you like.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.

.product__media .media:not(.media--thumb) img:hover {
    transform: scale(1.2);
}

shopify.base.css.jpg
shopify.base.css.jpg1878×902 166 KB

10

Hi Terence,

Thank you but unfortunately this doesn’t appear to have done anything.

11

Apologies, it is making it bigger but not the effect I was hoping.

12

Hi again,

As I mentioned, it’s not exactly the same. The other website does it with a custom implementation. In other words, it’s not something simple. You can ask for help from different people if you want, but I don’t think anyone can do it without a custom solution. If you have any further questions, feel free to ask.

13

Thanks for your help @TerenceKEANE

14

You are welcome.

If you have any other needs, just let me know. :wink: