Would you like your image to zoom a little when a user hovers over the image?  Small interactions like this can give some life to your website and make the website interactive. This is quite simple to achieve with a few lines of CSS.

Steps

To start with we will add a image module in Divi, add an image and assign it a class of imagezoom as shown below.

1. Add a new image module in DIVI by clicking on insert module.
2. Pick an image from the media library or add a new image using the “UPLOAD AN IMAGE” Button as shown below.
3. Head over to the advanced tab and assign a class of imagezoom in the CSS Class field as shown below.

Next we will add the following CSS in the stylesheet of your child theme.

Add the following css to your child theme (if using one) or to the DIVI Theme Options (Under Custom CSS)

.imagezoom {
overflow:hidden;
}
.imagezoom scale-image img{
transition: all 0.5s;
}
.imagezoom :hover img {
transform: scale(1.1)
}

Analysis

We use the CSS overflow property here because the overflow property specifies what should happen if content overflows an element’s box. In this case since we will scale the image to a larger size the content of the image that falls outside the image boundaries will be hidden, giving it a nice zoom effect.

Note I have kept the transition to 0.5s (this will take about half second) for the image to zoom. You can increase or decrease the transition speed as per your needs.  Also I have kept the transform scale to 1.1, but you can increase it to a higher value if you want the image to zoom to greater extent.

If you would like to know more about CSS Overflow Property, CSS Transform Property and CSS Transitions here are a couple of links for your quick reference.

CSS Overflow Property
https://www.w3schools.com/cssref/pr_pos_overflow.asp

CSS Transform Property
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://css-tricks.com/almanac/properties/t/transform/

CSS Transitions
https://www.w3schools.com/css/css3_transitions.asp

Final Result: Hover on the following images to see the Zoom effect

Here is the result on a couple of images that has the imagezoom class assigned to it.

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.