How To Add Zoom-In Hover Effect To The Images In Divi Modules

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

First of all, add an additional CSS class name to the module, for example:

et-zoom-in

Next, add the following code to the Custom CSS field under Dashboard / Theme Options / General Settings:

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

.et-zoom-in,
.et-zoom-in a {
    overflow: hidden;
}

.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-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:
https://thoughtbot.com/blog/transitions-and-transforms

If you see the code does not work for a Divi module, feel free to open a chat a report it 👍