Lightbox image magnification on hover

Hello,

I’ve tried to follow this great Webflow tutorial to add image magnification on hover: Image magnification on hover | Webflow University

However, it seems to work for an Image element, but not for the image of a Lightbox element.

Can anyone please help to apply the same effect on a Lightbox image?

Thanks!

Hello!

You can try to create a similar zoom effect using only Webflow Interactions.
Here is an example that you can clone and copy interaction or replicate it:
https://webflow.com/website/images-zoom-effect

Hope it helps.

1 Like

Hi @sabanna !

Thanks it worked :slight_smile:

I would have liked to show the magnifier circle and only zoom within it, but that’s a working solution so I’ll take it!

If anyone is interested I share the Webflow project for the zoom effect on a LightBox element: https://preview.webflow.com/preview/image-zoom-on-over-animation?utm_medium=preview_link&utm_source=designer&utm_content=image-zoom-on-over-animation&preview=79188262034cb724f331ad98aa1e26e0&mode=preview

1 Like

Hey, @WebflowUser !

I was able to adjust the layout and structure along with the interactions and created a moving magnifying glass effect as well.
magnif-glass

It is inside the same project as before, but page-2

1 Like

Wow very smart thank you @sabanna !!!

1 Like

@sabanna is it possible to make it functional on mobile too? So that users can press and move their finger over the image to zoom on some parts of it. Thanks in advance