Magnify-on-Hover Interaction - Not Working

Hi there,

I’ve attempted to implement Magnify-on-Hover functionality, to the product images on the eCommerce section of my website. Following the tutorial detailed in this Youtube video: Custom image magnification on mouse hover — Webflow tutorial - YouTube

Unfortunately, the magnifier (although working) does not align with the point on the image you’re hovering over, see link > IM© Bleed Texture Pack - IDLEMYND©

The only difference between my build and what’s detailed in the tutorial video, is that I added Magnify as a combo class, and as a result - my code looks a little different… Under plugin initialization I have inserted .product_image_main as opposed to just .magnify.

Code Template:

Your assistance would be very much appreciated.

Here is my site Read-Only:

1 Like

I have the same issue

I have the same issue

Hi, I experienced the same issue trying to make the magnifier work.

I checked my code a few times, and everything seemed to be right.
But the magnifier was also not aligning with the point at the right place on the image.

However, I managed to make it work when I set the display of the magnifier’s div I created to style it to “Block” and not to “Hidden”.

I hope it can resolve your issue too !


Worked for me too!