$10 Off AUTUMN10

How to Add Zoom Effect To Images?

Zoom in Effect

Create you own hover zoom effect

blank

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:

zoom-in

 

blank
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,
.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

Download Layout

Subscribe

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.

blank

By Kerwin

Web Designer | Developer | Educator
blank

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

blank

Check Out These Related Posts

0 Comments

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *