How to change a rollover image on Divi

Knowing how to modify an image on hover can be useful for any type of Website you are working on. Also, it helps you add subtle interaction to pages. You can, for example, use it to give additional perspective to testimonials, pages, and team pages.

With the new hover options of Divi, you can edit an image on hover using only the built-in options. By combining the column backgrounds and the opacity filter, you'll get there in no time.

Let's go!

Preview

Before delving into the tutorial, let's take a look at the four examples we will recreate from scratch.

General steps

Add a new section

In the first part of this tutorial, we'll take a few general steps. These general steps will help us save time when we focus on the first three examples. Open a new or existing page and add a regular section to it.

Add a new line

Column structure

Then add a new row using the following column structure:

1 column Background image

Without adding any modules yet, open the row settings and add a background image to the first column. Choose the image you want to fly over.

Column 1 Background image Repeat: No repeat

Add an image to the 1 column

Download Image

Continue by adding an image module to the first column and load the image you want to appear before hovering.

Add a title text module to the 2 column

Add content

In the second column, we will first need a Text Module title. Go ahead and add some contents H3.

Header Text Settings

Then go to the title text settings and make some changes.

Title 3 Font: Baloo Tamma
Title 3 Text color: # eda96a
Title 3 Text Size: 100 pixels (desktop), 70 pixels (tablet), 50 pixels (phone)
Title Spacing of 3 Letters: -4px

Title 3 Text Shadow Horizontal Length: 0.04em
Title 3 Text Shadow Vertical Length: 0.04em
Title 3 Color Shadow of text: rgba (0,0,0,0,6)

Spacing

Finally, add an upper margin in the spacing settings.

Top margin: 50 (desktop), 50px (tablet and phone)

Add a division module to the 2 column

Show divider

Add a separation module just below the Text Module title in the 2 column.

Show Divider: Yes

Color of the separator

Change the color of the divisor then.

Color of the separator: # e25300

modes

And select another style of separation in the style settings.

Style of separation: dotted

sizing

Also increase the divider weight in the sizing parameters.

Separator weight: 3px

Add a body text module to the 2 column

Add content

Let's move on to the last module! Add a text module body to the second column with a contents of choice.

Text settings

Change the text settings later.

Text size: 16px
Height of the line of text: 2.3em
Text orientation: Justify

Clone the section twice

Once you have completed all the general steps, double clone the section you have built. Now we'll have a separate section for each of the first three examples.

Create example # 1

Apply additional settings to the image module

Default opacity

Let's start creating the first example! The only thing we'll do here is create the hover transition, without any additional effects. To do this, open the Image module and go to the filters settings. Make sure the default opacity value is 100%.

Opacity: 100%

Hover over opacity

Change the opacity while hovering.

Opacity: 0%

Transitions

Finally, create a smooth transition by increasing the duration of the transition.

Duration of the transition: 1200ms

Create example # 2

Apply additional settings to the image module

Default spacing

Let's move on to the second example! Open the image module in column 1 and make sure there is no default custom fill.

Stationary spacing

Continue by adding some bottom hover margin to allow the hover image to increase in size.

Bottom padding: 100px

Shadow box

We also add a default box shadow that will disappear on rollover.

Shadow of the box, horizontal position: -55px
Box Shadow Vertical Position: -50px
Box shadow propagation force: -10px
Shadow Color: # eda96a

Default opacity

Then go to the filters settings and make sure the default opacity is 100%.

Opacity: 100%

Hover over opacity

Remove the opacity of the hover mod. This will allow the background of the column to display and create the “hover image” effect.

Opacity: 0%

Transitions

Finally, increase the duration of the transition in the transition parameters of the Image module.

Duration of the transition: 1200ms

Create an example 3

Add a gradient background to the 1 column

For the third example, we start by opening the row settings and adding a radial gradient background to the first column. This will give the hovering image a circular shape.

1 color: rgba (43,135,218,0)
2 color: #ffffff
1 column Gradient type: Radial
Column 1 Radial Direction: Center
Column 1 Starting Position: 60%
Column 1 Final Position: 60%

Apply additional settings to the image module

Default opacity

Continue by opening the image module of the 1 column and making sure that the default opacity is 100%.

Opacity: 100%

Hover over opacity

Remove any flyover opacity to reveal the background of the column.

Opacity: 0%