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?

To achieve a hover transform effect where the photo inside a div zooms in without affecting the size of the div in Webflow, you can follow these steps:

1. Start by creating a div block in your Webflow project and add a photo element inside it.
2. Select the parent div block (the one that contains the photo) and go to the "Transform" section in the Styles panel.
3. Click on the "+" button next to the Transform section to add an Interaction. Choose the "Hover" trigger.
4. With the hover interaction selected, click on the "+" button next to the Transform section within the Interaction panel to add a new Transform step.
5. In the Transform step settings, set the desired scale value to zoom in the photo. For example, you can set the X and Y value to 1.2 to scale the photo by 20%.
6. By default, the scale transform affects both the width and height of the element. To prevent it from affecting the size of the parent div, uncheck the "Scale children" option in the Transform settings.
7. Double-check the interaction settings to ensure that the Hover Out step is set to restore the initial state of the div block. This means you'll need to add a second Transform step with a scale of 1 (or the original size of the photo).
8. Preview and test the hover interaction by hovering over the div. The photo should zoom in without affecting the size of the div.

By following these steps, you'll be able to create a hover transform effect that allows the photo inside a div to zoom in without affecting the size of the div in Webflow. Remember to adjust the scale values and other properties as per your design requirements.