How can I set a hover transform in Webflow that allows the photo inside a div to zoom in without affecting the size of the div?
TL;DR
- Place the image inside a fixed-size div with overflow set to hidden.
- Apply a hover interaction to the image that scales it up (e.g., 1.1) and resets on hover out, using transitions for smooth animation.
To create a hover zoom effect on an image without changing the size of the parent div in Webflow, you need to apply the transform only to the image element, not the container.
1. Set Up the Structure
- Place an Image element inside a Div Block.
- Ensure the Div Block has a fixed or constrained size (e.g., set width and height or max values).
2. Style the Container Div
- Select the Div Block (container).
- Set overflow to "hidden" so excess of the zoomed image doesn't show outside the boundaries.
- Optionally define width and height (e.g., 300px by 200px) or use responsive units.
3. Add the Zoom Hover Interaction
- Select the Image element inside the Div.
- Go to the Interactions panel.
- Choose "Mouse Hover" interaction, then select "While hovering".
4. Create the Zoom Effect
- Under "While hovering", add a Transform → Scale action.
- Set the scale to something like 1.1 or 1.2 for zoom in.
- Under "Hover out", set the scale back to 1 (original size).
- Add a smooth transition under the Style panel → Interactions → Transitions:
- Add a Transform transition to the Image with duration (e.g., 300ms).
5. Maintain Container Layout
- Ensure only the Image is scaled—do not apply the transform to the container div.
- By keeping overflow: hidden on the container, the zoom appears contained within the original div size.
Summary
To zoom in a photo on hover without increasing the size of the div, apply a scale transform to the image only, and set the parent div’s overflow to hidden. Use Webflow's hover interactions and transitions for a smooth effect.