How To Swap 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.

VIEW DEMO

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

Content

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)

Advanced

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

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

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

Content

Show Divider
No

Module Link URL:
You can place your link here copy this module and place it in column 2 and 3

Design

Custom Padding
Top 150px
Bottom 150px

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

Content

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 #e5e5e5Copy in this module and place it in columns 2 and 3.

Design

Custom Padding
Top 10px
Bottom 5px

Your structure should now look like this.

Step 4
Go to Divi > Theme Options > Integration

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

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
// Image grid
	
$(document).ready(function(){
    $(".image_swap_1").hover(function(){
        $(".image_swap_1").toggleClass("image_swap_1_hover");
    });
});
	
$(document).ready(function(){
    $(".image_swap_2").hover(function(){
        $(".image_swap_2").toggleClass("image_swap_2_hover");
    });
});
	
$(document).ready(function(){
    $(".image_swap_3").hover(function(){
        $(".image_swap_3").toggleClass("image_swap_3_hover");
    });
});
</script>	

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

Place the following CSS code:

/* ########## SWAP IMAGES ON HOVER ########### */

#main-content .image_swap_1_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

#main-content .image_swap_2_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

#main-content .image_swap_3_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* ### PRELOAD IMAGES ON HOVER ### */

.page .clearfix:after{
    width:0; height:0; overflow:hidden; z-index:-1;
    content:	url(INSERT_IMAGE_URL_HERE) 
                        url(INSERT_IMAGE_URL_HERE) 
                        url(INSERT_IMAGE_URL_HERE);
}

.image_swap_1,
.image_swap_2,
.image_swap_3  {
    -webkit-transition: all .3s ease-in !important;
    -moz-transition: all 0.3s ease-in!important;
    -ms-transition: all 0.3s ease-in!important;
    -o-transition: all 0.3s ease-in!important;
    transition: all 0.3s ease-in!important;
}

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.

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.