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 DEMOStep 1
Create a section with a row and use a 3 column structure. The row needs to have the following settings:

• Content
• Design
• Advanced

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 800x800pxStep 2
In column 1 place a divider module and use the following settings:

• Content
• Design
• Advanced

Show Divider
No

Module Link URL:
You can place your link hereCopy this module and place it in column 2 and 3Step 3
In column 1 place a text module under the divider module and use the following settings:

• Content
• Design
• Advanced

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

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.