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
- Set up a div containing the photo and assign classes to both.
- Configure the div's overflow to hidden and set the photo to cover.
- Use the Interactions panel to apply scale transform on hover for the photo, adjusting timing and easing for smoothness.
To create a hover transform in Webflow where a photo inside a div zooms in without affecting the div's size, follow these steps:
1. Set Up Your Elements
- Ensure you have a div that contains the photo you want to animate.
- The photo should be placed as a child element inside this div.
2. Assign Classes
- Select the div and assign it a class name, for example, "image-container".
- Select the photo inside the div and assign it a class name, for example, "zoom-photo".
3. Apply CSS Styles
- For the image-container:
- Set Overflow to Hidden. This ensures that when the photo zooms, it won’t affect the div’s size.
- For the zoom-photo:
- Ensure the photo is set to Cover within the div if you want it to fill the whole space.
4. Create the Hover Interaction
- Select the zoom-photo and go to Interactions panel.
- Click on "Create a new interaction" and choose "Mouse Hover".
- Under Hover In, add a Transform action.
- Set Scale to 1.1 or 1.2 (or your desired zoom level) to have the photo grow slightly.
- Under Hover Out, add another Transform action to Set Scale back to 1.0.
5. Adjust Timing and Easing
- In both Hover In and Hover Out settings, you can adjust the Duration and Easing to control how smooth and fast the zoom effect is applied.
Summary
To create a hover effect where a photo zooms in without changing the size of its containing div in Webflow, ensure the div has Overflow set to Hidden, apply scale transforms on hover to the photo, and adjust easing for smoothness.
