How to Add Zoom Effect To Images?

Zoom in Effect

Create you own hover zoom effect

To add a Hover Zoom-In effect to a Divi image module, there are two steps to apply.

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



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

.zoom-in.et_pb_image:hover img,
.zoom-in .et_pb_image_wrap:hover img,
.zoom-in a:hover img {
    transform: scale(1.2); 
    transition: all 300ms 0s ease;

.zoom-in a {
    overflow: hidden;

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



Feel free to change the property values of the the animation code.


Download Layout


Join Our Divi Mobi First Community

Get access to all our Divi Mobi First tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

By Kerwin

Web Designer | Developer | Educator

Completely revolutionize the way you think about building Divi Websites.
Get Instant Access Now

Check Out These Related Posts



Submit a Comment

Your email address will not be published.