Adding interactive visual effects to your website can enhance user engagement and create a more dynamic browsing experience.
In this article, we will guide you through the process of adding a zoom-in hover effect to the Image Module in Divi.
Customize the Image module
Open the Image module setting by clicking on the Gear Icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Add the following CSS code:
selector.et_pb_image:hover img,
selector .et_pb_image_wrap:hover img,
selector a:hover img {
transform: scale(1.3);
transition: all 2s 0s ease;
}
selector,
selector a {
overflow: hidden;
}
selector.et_pb_image img,
selector .et_pb_image_wrap img,
selector a img {
transition: all 1s 0s ease;
}
Note: If you want to change the animation slightly, you can play with the values in the above code.
You can find more information about different properties and values you can use in the CSS Transitions and Transforms for Beginners blog article.