Image Grid With a Background Hover Effect

In this week’s tutorial, we will build an image grid with a background hover effect. This is a nice way to showcase your services. Here is a sneak peek of what we are going to build.

Step 1: Downloading

Sign up and download the layout section here:

After downloading, unzip the folder: Image Grid With Hover Effect.zip

Inside you will find the JSON file: Image Grid With a Background Hover Effect.json

Step 2: Importing

Go to Divi > Divi Library and click on Import & Export button.

Click on the Import tab and start uploading the Image Grid With a Background Hover Effect.json file.

Import image grid layout section

Go to the page where you want to import this image grid. Enable the visual builder and expand the bottom menu.

  1. Click on the + symbol
  2. Switch to “Your Saved Layouts”
  3. Make sure “Replace Existing Content” is unchecked
  4. Import the image grid section
Import image grid

Step 3: Place the jQuery Code

Go to Divi > Theme Options > Integration > Add code to the < head > of your blog and place the following jQuery.

<script>

//Image grid

jQuery(document).ready(function(){
    jQuery(".image_grid_1").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_1_hover");
    });
});

	
jQuery(document).ready(function(){
    jQuery(".image_grid_2").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_2_hover");
    });
});
	
jQuery(document).ready(function(){
    jQuery(".image_grid_3").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_3_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_4").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_4_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_5").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_5_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_6").hover(function(){
        jQuery(".main_bg_imagegrid").toggleClass("image_grid_6_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_1").hover(function(){
        jQuery(".button_1_image_grid").toggleClass("button_image_grid_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_2").hover(function(){
        jQuery(".button_2_image_grid").toggleClass("button_image_grid_hover");
    });
});
	
jQuery(document).ready(function(){
    jQuery(".image_grid_3").hover(function(){
        jQuery(".button_3_image_grid").toggleClass("button_image_grid_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_4").hover(function(){
        jQuery(".button_4_image_grid").toggleClass("button_image_grid_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_5").hover(function(){
        jQuery(".button_5_image_grid").toggleClass("button_image_grid_hover");
    });
});	
	
jQuery(document).ready(function(){
    jQuery(".image_grid_6").hover(function(){
        jQuery(".button_6_image_grid").toggleClass("button_image_grid_hover");
    });
});	

</script>

Step 4: Place the CSS Code

Go to Divi > Theme Options > CSS and place the following CSS code.

/* ################################## */
/* ########## GRID IMAGES ########### */
/* ################################## */

/* #### TILE 1 #### */
#main-content .image_grid_1_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* #### TILE 2 #### */
#main-content .image_grid_2_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* #### TILE 3 #### */
#main-content .image_grid_3_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* #### TILE 4 #### */
#main-content .image_grid_4_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* #### TILE 5 #### */
#main-content .image_grid_5_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}

/* #### TILE 6 #### */
#main-content .image_grid_6_hover {
    background-image: url(INSERT_IMAGE_URL_HERE)!important;
}


/* ### PRELOAD IMAGES GRID ### */

.home .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) 
		url(INSERT_IMAGE_URL_HERE)
		url(INSERT_IMAGE_URL_HERE)
		url(INSERT_IMAGE_URL_HERE);
}

.main_bg_imagegrid {
	-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;
}

Step 5: Add your images

The images I used in the demo are not included, and you need to use your own images. Go to the media library and upload 7 images.

Make sure they have all the same size. I used 1240x813px.

The first image is the one you see without hovering over any tile. In my case, the lady in a green dress. You can find this image by opening the row and go to the background image.

The other 6 images will be visible when you hover over a tile. To make this happen, we need to do this:

Go to your media library and find the image URLs of those 6 images. Just click on the image, and you can see the URL.

Image url

Now go to Divi > Theme Options > CSS

In the CSS code you just placed, you will see this a couple of times: INSERT_IMAGE_URL_HERE

Replace that with your image URL for each tile.

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

For the first tile it will then look like this:

#main-content .image_grid_1_hover {
    background-image: url(https://www.demo.markhendriksen.com/wp-content/uploads/2021/06/Image-1.jpg)!important;
}

Replace the URL with your own.

When you have placed all 6 URLs, there is one more thing to do.

Preload images

When you did the steps above, your image grid will work. However, the images will start loading until you hover over a tile this will cause a small delay. To avoid this, we need to preload the images.

Replace INSERT_IMAGE_URL_HERE with the same URLs as you did in the previous step (the 6 background images that show up on hover).

/* ### PRELOAD IMAGES GRID ### */

.home .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) 
		url(INSERT_IMAGE_URL_HERE)
		url(INSERT_IMAGE_URL_HERE)
		url(INSERT_IMAGE_URL_HERE);
}

Tablet / Mobile

Hover doesn’t work for mobile and tablet, so I created a different section for those. Make sure you add your images to that section as well.

2 section desktop and mobile

And that is it. If you have any questions, please let me know in the comments.

3 thoughts on “Image Grid With a Background Hover Effect”

  1. Awesome I requested this on Facebook and you come up with tutorial head off to you. I need for my client site. I will make one for my site soon.

    Reply

Leave a Comment

1 Shares
Share
Pin1
Tweet