Zoom an image on click

Hello everyone,

How can one achieve a simple zoom action when wanting to see a full screen HiRes version of an image. It seems like this requires a div outside of the image but isn’t there a way to just do this within columns or grids?

Due to the sensitivity of the work I can not provide a public link.


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

Without custom code? I’d do this:

Structure:

Container Div (fixed width/height, overflow=hidden)

Background Product image div (absolutely positioned - set to fill)

Create an interaction so that when the parent container is hovered, you increase the scale of the background image. As an add-on, I’d use a “While Mouse Moves Over” interaction to move the background as the mouse moves around the parent container. Sort of like how Amazon does it, basically treating the cursor as a magnifying glass.

1 Like

Thanks, but I have images inside columns and grids which are already cramped. This solution wouldn’t work. It’s odd that something as basic as this isn’t already in Webflow. @#featurerequest

1 Like