Control zoom amount for image hover

Hello Webflow!

I’ve created a zoom hover effect following the awesome tutorial Webflow produced. But the zoom level is way to zoomed in, users will struggle to read the full table/image I’ve placed in. Is there a way to control the zoom level within the code?

Here’s the code pasted into the page:

And here is a link to my webpage: Webflow - SOUTHWORKS | Current

Cheers!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Brendan_Harper

I believe that if you change the “300,300” numbers on line 17 you’ll change the zoom level, although I am not sure, can you share the link to the live website and the link to the tutorial?

1 Like

Thanks @avivtech I changed the numbers down to “100,100” but it seems it only changed the size of the circle and the zoom is still the same.
Here is the live website link: https://www.southworks.com/why-us
And the tutorial: Custom image magnification on mouse hover — Webflow tutorial - YouTube

Try adding:

zoomstart: 2;

between lines 13 and 14

from here:

Is this correct:


At the moment the zoom hover effect has gone when I published the site.

Sorry - “,” instead of the “;”

zoomstart: 2,

No luck unfortunately:

If I change the ‘zoomstart’ number lower would it effect the zoom?

Theoretically
This JavaScript library is not supported anymore and the documentation is in Russian :confused:

Yeah I couldn’t work out the documentation! The lower number didn’t do the trick, thanks for your help @avivtech if you think/find anything else that could help I’d really appreciate it! :slight_smile:

Hey, I know this is a few years late, but if anyone looking for answers in 2025+, I found that the only solution to the amount of magnifying on this code, is to create images that are the right pixel size to which you want to zoom. It will zoom to the original image size. If the image is too big - it will zoom in too much.

Here is my website, where I added this effect to my work section: Webflow - YSPEX Agency