How to Change an Image on Hover with Divi

December 13, 2018

Knowing how to change an image on hover can come in handy for any kind of website you’re working on. Furthermore, it helps you add subtle interaction to pages. You can, for instance, use it to give additional perspective to testimonials, about pages and team pages. With Divi’s new hover options, you can change an image on hover using the built-in options only. By combining column backgrounds and the opacity filter, you’ll get there in no time.

Let’s get to it!

[youtube https://www.youtube.com/watch?v=njCLoyTusLU?feature=oembed&w=719&h=539]

Preview

Before we dive into the tutorial, let’s take a look at the four examples we’ll recreate from scratch

how-to-change-an-image-on-hover-with-divi Theme Builder Layout

General Steps

Add New Section

In the first part of this tutorial, we’ll go through some general steps. These general steps will help us save time when focusing on the first three examples. Open a new or existing page and add a regular section to it.

how-to-change-an-image-on-hover-with-divi Theme Builder Layout

Add New Row

Column Structure

Then, add a new row using the following column structure:

how-to-change-an-image-on-hover-with-divi-1 Theme Builder Layout

Column 1 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 appear on hover.

  • Column 1 Background Image Repeat: No Repeat

how-to-change-an-image-on-hover-with-divi-2 Theme Builder Layout

Add Image to Column 1

Upload Image

Continue by adding an Image Module to the first column and upload the image you want to appear before hover.

how-to-change-an-image-on-hover-with-divi-3 Theme Builder Layout

Add Title Text Module to Column 2

Add Content

In the second column, we’ll need a title Text Module first. Go ahead and add some H3 content.

how-to-change-an-image-on-hover-with-divi-4 Theme Builder Layout

Heading Text Settings

Then, go to the heading text settings and make some changes.

  • Heading 3 Font: Baloo Tamma
  • Heading 3 Text Color: #eda96a
  • Heading 3 Text Size: 100px (Desktop), 70px (Tablet), 50px (Phone)
  • Heading 3 Letter Spacing: -4px

how-to-change-an-image-on-hover-with-divi-5 Theme Builder Layout

  • Heading 3 Text Shadow Horizontal Length: 0.04em
  • Heading 3 Text Shadow Vertical Length: 0.04em
  • Heading 3 Text Shadow Color: rgba(0,0,0,0.6)

how-to-change-an-image-on-hover-with-divi-6 Theme Builder Layout

Spacing

Lastly, add some top margin in the spacing settings.

  • Top Margin: 100px (Desktop), 50px (Tablet & Phone)

how-to-change-an-image-on-hover-with-divi-7 Theme Builder Layout

Add Divider Module to Column 2

Show Divider

Add a Divider Module right below the title Text Module in column 2.

  • Show Divider: Yes

how-to-change-an-image-on-hover-with-divi-8 Theme Builder Layout

Divider Color

Change the divider color next.

  • Divider Color: #e25300

how-to-change-an-image-on-hover-with-divi-9 Theme Builder Layout

Styles

And select another divider style in the styles settings.

  • Divider Style: Dotted

how-to-change-an-image-on-hover-with-divi-10 Theme Builder Layout

Sizing

Increase the divider weight in the sizing settings as well.

  • Divider Weight: 3px

how-to-change-an-image-on-hover-with-divi-11 Theme Builder Layout

Add Body Text Module to Column 2

Add Content

On to the last module! Add a body Text Module to the second column with some content of choice.

how-to-change-an-image-on-hover-with-divi-12 Theme Builder Layout

Text Settings

Change the text settings next.

  • Text Size: 16px
  • Text Line Height: 2.3em
  • Text Orientation: Justify

how-to-change-an-image-on-hover-with-divi-13 Theme Builder Layout

Clone Section Twice

Once you’ve finished all the general steps, clone the section you’ve built twice. Now, we’ll have a separate section for each one of the first three examples.

how-to-change-an-image-on-hover-with-divi-14 Theme Builder Layout

Create Example #1

Apply Additional Settings to Image Module

Default Opacity

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

  • Opacity: 100%

how-to-change-an-image-on-hover-with-divi-15 Theme Builder Layout

Hover Opacity

Change the opacity on hover.

  • Opacity: 0%

how-to-change-an-image-on-hover-with-divi-16 Theme Builder Layout

Transitions

Lastly, create a smooth transition by increasing the transition duration.

  • Transition Duration: 1200ms

how-to-change-an-image-on-hover-with-divi-17 Theme Builder Layout

Create Example #2

Apply Additional Settings to Image Module

Default Spacing

On to the second example! Open the Image Module in column 1 and make sure there’s no default custom padding there.

how-to-change-an-image-on-hover-with-divi-18 Theme Builder Layout

Hover Spacing

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

  • Bottom Padding: 100px

how-to-change-an-image-on-hover-with-divi-19 Theme Builder Layout

Box Shadow

We’re also adding a default box shadow which will dissapear on hover.

  • Box Shadow Horizontal Position: -55px
  • Box Shadow Vertical Position: -50px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: #eda96a

how-to-change-an-image-on-hover-with-divi-20 Theme Builder Layout

Default Opacity

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

  • Opacity: 100%

how-to-change-an-image-on-hover-with-divi-21 Theme Builder Layout

Hover Opacity

Remove the opacity of the module on hover. This will allow the column background to show up and create the ‘image on hover’ effect.

  • Opacity: 0%

how-to-change-an-image-on-hover-with-divi-22 Theme Builder Layout

Transitions

Lastly, increase the transition duration in the transitions settings of the Image Module.

  • Transition Duration: 1200ms

how-to-change-an-image-on-hover-with-divi-23 Theme Builder Layout

Create Example #3

Add Gradient Background to Column 1

For the third example, we’re starting off by opening the row settings and adding a radial gradient background to the first column. This will give the image on hover a circular shape.

  • Color 1: rgba(43,135,218,0)
  • Color 2: #ffffff
  • Column 1 Gradient Type: Radial
  • Column 1 Radial Direction: Center
  • Column 1 Start Position: 60%
  • Column 1 End Position: 60%

how-to-change-an-image-on-hover-with-divi-24 Theme Builder Layout

Apply Additional Settings to Image Module

Default Opacity

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

  • Opacity: 100%

how-to-change-an-image-on-hover-with-divi-25 Theme Builder Layout

Hover Opacity

Remove all opacity on hover to allow the column background to show through.

  • Opacity: 0%

how-to-change-an-image-on-hover-with-divi-26 Theme Builder Layout

Create Example #4

Add New Row

Column Structure

On to the last example! Here, we’ll need a new row with 6 columns.

how-to-change-an-image-on-hover-with-divi-27 Theme Builder Layout

Column 1 Background Image

Without adding any modules yet, open the row settings and add the background image you want to appear on hover as the column 1 background image.

  • Column 1 Background Image Repeat: No Repeat

how-to-change-an-image-on-hover-with-divi-28 Theme Builder Layout

Repeat for All Columns in Row

Repeat the previous step for each one of the columns in your row.

how-to-change-an-image-on-hover-with-divi-29 Theme Builder Layout

Sizing

Then, go to the sizing settings of the row and remove all space between columns.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: 1

how-to-change-an-image-on-hover-with-divi-30 Theme Builder Layout

Add Image Module to Column 1

Upload Image

Continue by adding an Image Module to the first column and uploading the image you want to appear by default.

how-to-change-an-image-on-hover-with-divi-31 Theme Builder Layout

Default Opacity

Make sure this module’s default opacity is 100%.

  • Opacity: 100%

how-to-change-an-image-on-hover-with-divi-32 Theme Builder Layout

Hover Opacity

And remove the opacity on hover to allow the column background to show instead.

  • Opacity: 0%

how-to-change-an-image-on-hover-with-divi-33 Theme Builder Layout

Transitions

Increase the transition duration for a smooth transition.

  • Transition Duration: 800ms

how-to-change-an-image-on-hover-with-divi-34 Theme Builder Layout

Clone Image Module 3 Times & Place Duplicates in Remaining Columns

Once you’re done modifying the Image Module in column 1, you can clone it and place the duplicates in the remaining columns. Make sure to change the images as well.

how-to-change-an-image-on-hover-with-divi-35 Theme Builder Layout

Preview

Now that we’ve gone through all steps, and all four examples, let’s take a final look at all three examples we’ve created.

how-to-change-an-image-on-hover-with-divi Theme Builder Layout

Final Thoughts

Changing an image on hover can help bring that extra interaction to testimonial sections, about pages and team pages. In this tutorial, we’ve shown you an easy way to achieve different kinds of images on hover using Divi’s built-in options only! If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Featured Image by LovArt / shutterstock.com 

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

10-divi-ui-kits-for-your-web-design-toolkit Theme Builder Layout

10 Divi UI Kits for Your Web Design Toolkit

Divi UI kits are a different type of layout. They can include full pages, but rather than only providing a full-page design they mostly focus on one thing, such as headers, footers, sections, and specific modules. They often provide more detail in styling for a module...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.