All Collections
FAQ's and Troubleshooting
How To Add Zoom-In Hover Effect To The Image Module
How To Add Zoom-In Hover Effect To The Image Module

Add custom hover zoom-in hover effect for the Image module

Karen avatar
Written by Karen
Updated over a week ago

Hover Zoom-In effect can be added almost to every Divi module that contains an image. There are two steps to apply the effect.

Step 1. Add a CSS Class to the Image module

Add a CSS class name to the module, for example: dt-zoom-in. Open the Image module's settings, go to Advanced Tab > CSS ID & Classes > CSS Class, and type in: dt-zoom-in

Step 2. Add the custom CSS code for the Zoom-in Hover effect

Add the following code to the Custom CSS field under Dashboard / Theme Options / General Settings:

.dt-zoom-in.et_pb_image:hover img,
.dt-zoom-in .et_pb_image_wrap:hover img,
.dt-zoom-in a:hover img {
transform: scale(1.3);
transition: all 2s 0s ease;

.dt-zoom-in a {
overflow: hidden;

.dt-zoom-in.et_pb_image img,
.dt-zoom-in .et_pb_image_wrap img,
.dt-zoom-in a img {
transition: all 1s 0s ease;

If you want to change the animation slightly, you can play with the values in the code. More info about all the parameters here:

Did this answer your question?