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,
.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:
https://thoughtbot.com/blog/transitions-and-transforms.