How to Change an Image on Hover in Divi Builder (A Simpler Method)

Creating a page using Divi Builder, you can apply some animation effects to the elements on your page. From a simple effect like changing an image on hover to a complex scroll effect. In this article, we will show you how to add the first mentioned effect.

Does it require CSS knowledge to change an image on hover in Divi Builder? Unless you want to apply an advanced effect style, it requires no CSS skills to do so. Divi Builder comes with a built-in setting option to allow you to change an image on hover. Well, not just the image. You can actually display different content on other elements — such as a button and text — when a user hovers over the associated elements.

Here is an example we created. As you can see, each image changes as the cursor pointed to it.

In the example above, we added the images on three different columns on a row.

To get started, first, prepare a section and row where you want to add your images. You can read our previous articles to learn about section and row in Divi Builder. Once everything is ready, click the grey plus icon on a column and add the Image module.

The Image module settings panel will appear right after you add the Image module. Click the image holder on the Image block under the Content tab on this panel and select your first image (the image before the hover).

Once your first image is added, hover your mouse over it and click the mouse icon and click the Hover tab.

Once you are on the Hover tab, simply click the existing image and replace it with the second image (the image that appears on hover).

That’s it. You can go to the Design tab to style up the image. Read our previous article to learn how to work with the Image module in Divi Builder.

A little tip. You can apply different CSS transform to the second image to get a more compelling animation style. Take a look at the example below.

How to apply a CSS transform?

First, open the settings panel of one of the Image modules (by clicking the gear icon on the module handle). On the Image module settings panel, go to the Design tab and open the Transform block. On the Transform block, click the cursor icon and select the Hover tab.

Select the CSS transform you want to apply (by clicking one of the available tabs) and you use your mouse to set the transform value (or you can also set the value manually by typing your preferred value).

To set the transition duration of the CSS transform, you can go to the Advanced tab and open the Transition block. From this block, you can also set the transition delay and the transition speed curve.

Simply repeat the steps above to apply a CSS transform to other images you have.