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.

8 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
  2. After what seems like weeks of collating and bookmarking information (I’m new to Divi) and focussing on loading speeds (even more so since the recent Divi updates!), I’m finally getting around to looking at the design and content of my website. I recall your post on Facebook and loved the grid effect. I’ve bookmarked a number of ‘go to’ designs and this is one of them. I also recall your comment saying that you intended to do a tutorial and a quick Google led me to this page. Anyway, I’ve followed your tutorial up to the point where the images have to be loaded and I must commend you on your straightforward and easy-to-follow instructions which are so helpful to us newbies! Obviously, I haven’t got it working yet and maybe I’ll stumble a bit but just wanted to commend you – not only on the design but also on your tutorial. I have a question for now, given that the code is placed in Theme Options, how would I isolate the effect to one page? For now, I’m using a page called Blog which will be replaced when I get around to doing the page properly (it wasn’t set up unfortunately so I have another learning curve to deal with!). Thanks again.

    Reply
    • Hi Sandy,

      If you want to place this code only for the page you are using the grid you can do the following:

      Place a code module on that page and copy-paste the jQuery code (with the script tags).

      Place another code module and copy-paste the CSS code between the style tags

      Reply
  3. I love this layout. Thank you so much for creating it! I have one issue that I am unable to resolve. I have followed the instructions but my starting image still does not display until I hover. Any ideas?

    Reply

Leave a Comment

1 Shares
Share
Pin1
Tweet