You are here:
< Back

Using hover options, you can create all kinds of stunning hover effects and transform Divi modules into fun and interactive elements. Our hover option interface is unique and amazingly easy to use. Every design setting in Divi that supports transitions can now be customised on hover with ease, and you will soon be creating beautiful hover effects in no time at all!

Alternatively, read the full tutorial.

Adding a zoom effect when hovering

If you want to add a hover zoom effect on your images, you’ll need to:

  • go to Divi > Theme Options > General > Custom CSS
  • add the following CSS:.image-zoom img {
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    }.image-zoom img:hover{
    transform:scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform:scale(1.1);
    }.image-zoom-constrained {
    overflow:hidden;
    }
  • add the following class to any of the images you want to zoom – image-zoom image-zoom-constrained

If you want the image to actually grow larger than its initial box when hovered on:

  • remove .image-zoom-constrained {
    overflow:hidden;
    }
  • remove image-zoom-constrained from the image’s class

Switching images on hover

Step 1: Add an image module and upload your bottom image (the image that appears when you hover). Then, in the Advanced tab of the module, add the class “bottom-image” to the CSS class box.

Step 2: Add an image module below the bottom image and upload your top image (the image which is visible by default). Then, in the Advanced tab of the module, add the class “top-image” to the CSS class box.

IMPORTANT: For this effect to work, both images should be the exact same dimensions. In this example I’m using a square image.

Step 3: Save & Exit the visual builder.

IMPORTANT: At this stage you’ll have two images stacked on top of each other vertically, so I wouldn’t recommend doing this on a live page. Saying that, I wouldn’t recommend doing any sort of experimental updates on a live page!

If you are, then do this step after step 7.

Step 4: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

/*===== Hover image swap =====*/

.bottom-image {
position: absolute !important;
}

.top-image {
opacity: 1;
transition: all 0.4s;
}

.top-image:hover {
opacity: 0;
}

Step 5: Save the CSS settings and you’re done!

Changing images from B&W to colour on hover

Finally, we can show colour pics for black and white ones on hover. Read the full tutorial here.

Previous Horizontally overlap row borders
Next How to change a background gradient during hover