Home

Homepage

Examples

Layout examples

Freebies

Free downloads

Pricing

Pricing plans

Tutorials

Tutorials & Tools

Contact Us

Questions, concerns or comments?

My Account

View member dashboard

Cart

View your cart

WELCOME TO DIVIMOBIFIRST

DIVI COMPLETE LAYOUT SCHEME

HEADERS AND FOOTERS

SECTION LAYOUT

IMAGE LAYOUTS

PRICE TABLES

PRODUCT LAYOUTS

TAB LAYOUTS

SLIDERS






































PRICING

Monthly, Yearly or Lifetime

View Pricing Table

jQuery Script Generator

jQuery structure and syntax generator

Floating Modules

How to Create a Floating Module?

Zoom in Effect

How to Add Zoom Effect To Images?

Plugin Tutorial

Guide on How to Use Plugin

CONTACT US

Questions, concerns and comments

Send us a message

YOUR CART

2

Back to top

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:

zoom-in

 

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.

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

2 Comments

2 Comments

  1. Jefferey Nincehelsor

    Simple yet effective.

    Reply
  2. Zoritoler Imol

    Nice!!!!!!.

    Reply

Submit a Comment

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