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. For better loading speed compress the images, you can follow my tutorial best divi image sizes on how to do that.

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.

0 Comments

close
Lifetime access to all Divi child themes and plugins
21 Shares
Share20
Tweet
Pin1
Buffer