How To Swap Image On Hover

by | Nov 21, 2018 | Divi tutorials

How to swap an image on hover

In this tutorial you will learn how you can swap an image on hover. For this we will be using CSS and a little bit of jQuery. But we will start with building the section, row and modules first.

Step 1
Create a section with a row and use a 3 column structure. The row needs to have the following settings:

Column 1 Background:
Place here an image (this one is visible on non-hover)

Column 2 Background:
Place here an image (this one is visible on non-hover)

Column 3 Background:
Place here an image (this one is visible on non-hover)

Note: for the best effect make all the images the same size. In my demo they are all 800x800px

Nothing needed

Fill in the following classes:

Column 1 CSS Class:
image_swap_1

Column 2 CSS Class:
image_swap_2

Column 3 CSS Class:
image_swap_3

Step 2
In column 1 place a divider module and use the following settings:

Show Divider
No

Module Link URL:
You can place your link here

Custom Padding
Top 150px
Bottom 150px

Nothing needed

Copy this module and place it in column 2 and 3

Step 3
In column 1 place a text module under the divider module and use the following settings:

In the text field you can give it a title. I used a h3 title

Module Link URL:
You can place your link here

Background:
I used #e5e5e5

Custom Padding
Top 10px
Bottom 5px

Nothing needed

Copy this module and place it in column 2 and 3.

Your structure should now look like this.

Swap images structure

Step 4
Go to Divi > Theme Options > Integration

Place the following code in Add code to the < head > of your blog

Step 5
Go to Divi > Theme Options > General > Custom CSS

Place the following CSS code:

Upload 3 images in your media library that you want to see when you hover over a column. For the best result make all the images the same size, mine are 800x800px.

At line 4, 8 and 12 you can replace INSERT_IMAGE_URL_HERE with the images you just uploaded in step 1. image_swap_1_hover is for column 1 etc.

In case you don’t know how to get the image links follow these directions

Go to your media library and click on the image you want to use for column 1 on hover.

How to get the image URL

When you did the steps above your image grid will work. However the images will start loading until you hover over a column this will cause a small delay. To avoid this we need to preload the images. At line 19, 20 and 21 you can insert the same URL’s that you did previous.

Join today

Free Membership

Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.

0 Comments

21 Shares
Share20
Tweet
+1
Pin1
Buffer