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.


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.
Add New Image Module
Assign a class to the module

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 {
.imagezoom scale-image img{
transition: all 0.5s;
.imagezoom :hover img {
transform: scale(1.1)


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

CSS Transform Property

CSS Transitions

Final Result:

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

Zoom Image on Hover in Divi
Zoom Image on Hover in Divi