How to build an image grid with a rollover

In this tutorial you will be learning on how to create an image grid with a rollover effect. You can follow this step by step guide to accomplish this or you can use the json file and upload this section to your Divi library.

This image grid is created out of blurbs. Each service is made out of 2 blurbs. One is visible and the other one is only visible when you mouse over it.

VIEW DEMO

Step by step guide

Step 1
Download the image pack I used for this tutorial and unzip it. You can use the same images as I did for this tutorial. If you are going to use your own images that it is good practice to reduce the size and compress the images, on how to do this you can follow this tutorial best Divi image sizes for your website.DOWNLOADIf you just want to use this section and not to build it from scratch you can just use the json file in the download pack. You will still need to add the CSS part manually (later in this tutorial).

To upload the file do as follow:

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Image grid with rollover.json.

Now you can use this section on any page with the import from library function.Step 2
Create a section and use these settings:

• Content

Background: Upload the image section_with_overlay
Use Parallax Effect: Yes
Parallax Method: CSSStep 3
Create a row and choose a 3 column layout and use these settings:

• Content
• Design
• Advanced

Background: Upload the image row_bg
Use Parallax Effect: Yes
Parallax Method: CSSStep 4
Add a blurb module in the first column and use these settings:

• Content
• Design
• Advanced

Title: fill in your title in my case Service 1
Background: in the color tab use rgba(0,0,0,0.58)Step 5
Add another blurb module under the previous and use these settings:

• Content
• Design
• Advanced

Title: fill in your title in my case Service 1
Content: see below (replace # with a link)
Background: in the image tab upload service_image_1

<a href="#">Read more</a>

Step 6
Copy these two blurbs and place them in the other two columns.

Replace the images and titles

Duplicate this row.Step 7
Add this CSS code in Divi > Theme options > Custom CSS
I have added some comments in the CSS where you can change the button color.

/* ##### IMAGE GRID WITH ROLLOVER ##### */

.blurbs_grid .et_pb_column_1_3 .et_pb_blurb_content {
  	display: flex;
  	justify-content: center;
  	flex-direction: column;
  	height: 200px;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover,
.blurbs_grid .et_pb_column_1_3:hover .blurb_active {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.blurbs_block .et_pb_column_1_3:hover .blurb_active {
	visibility:hidden;	
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover {
	top:0;
	opacity:0;
	position:absolute;
	visibility:hidden;
	width: 100%;
}

.blurbs_grid .et_pb_column_1_3:hover .blurb_hover {
	visibility:visible;
	opacity:1;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover a {
	background-color: #ce8b2f; /* Background color of the button */
        color: #fff; /* Text color of the button */
        padding: 7px 15px;
        text-transform: uppercase;
        box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.25);
	margin-top:15px;
	display: inline-block;
} 

.blurbs_grid .et_pb_column_1_3 .blurb_hover a:hover {
	background-color: #005ba3; /* Background color of the button when hover */
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover .et_pb_blurb_container {
	margin-top: 52px;
}