How to make A Custom Divi Blurbs Module with Hover Effect

Download Divi Library .JSON file [4KB]  |   View demo module

Table Of Contents

• Creating a section and adding the Divi Blurbs module
• Customising the Divi Blurbs module
• Adding the custom CSS
• Cloning the module

Creating the section and adding the Divi Blurbs module

Add a standard section, and choose 1/3 + 1/3 + 1/3 structure.

Standard Section

Columns

In any of the three columns, add a Blurbs module. For now, let’s add only one, and once we’re done with designing it, you can clone that module to the other two columns.

Add a specific ID and class for this section. Click the section settings icon:

Section Settings

Select Advanced tab, and inside the ID and the Class input fields, type this: free_impi_blurbs

ID and Class

We also want to edit couple of the row settings. Click the row setting icon:

Row Settings

Select Design tab.

• Set Use Custom Width to – YES and make it 11170px
• Set Use Custom Gutter width to – YES and make it 2

Click Save & Exit.

Customising the Divi Blurbs module

Content tab

Let’s first add some content to it.
To do so, click the Divi Blurb module settings:

Module settings

Add a title and content:

Title and Content

Also set the option Use Icon to – Yes and add an icon. This is the one I’m going to use in this example:

Divi Icons

Design tab

Let’s make our blurb look awesome. Using the Design tab, we want to edit the look of the module, so let’s follow these steps:

• For the icon colour, set #353535.
• Set the Use Icon font size to YES – make it 60px
• Text orientation – set to center
• Title font: PlayFair Display, Bold, 30px, white, centered
• Body font: Lato, Regular, 16px, white, centered
• Also, scroll down to Sizing section and add top padding: 94px, bottom padding 5px, and 43px of padding to each side of the module.

Advanced Tab

Inside the Before box, add this CSS:

content: "Say Hello";
display: block;
font-family: 'Playfair Display',Georgia,"Times New Roman",serif;
font-weight: 700;
font-size: 30px;
line-height: 120%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
width: 100%;
text-align: center;
opacity: 0;
transition: 0.3s;

Inside the Main element box, paste this:
background-color: #353535;

Background Colour

Click Save & Exit.

Adding the custom CSS

To add a great Divi Hover effect to this blurb, we will have to use a bit of CSS.
Copy this CSS code:

/*Fee Impi Blurb*/
.free_impi_blurbs .et_pb_blurb {
cursor: pointer;
overflow: hidden;
position: relative;
}

.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content {
padding-top: 63px;
position: static;
}

.free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image {
position: absolute;
left: 0;
right: 0;
top: 72px;
}

.free_impi_blurbs .et_pb_blurb {
transition: all 0.3s;
}

.free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image,
.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container {
transition: 0.3s;
transition-delay: 0.3s;
}

.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container h4,
.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description {
transition: opacity 1s;
transition-delay: 0.4s;
opacity: 1;
}

.free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container h4,
.free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description {
transition: 0.3s;
transition-delay: 0s;
opacity: 0;
}

/*Hover*/
.free_impi_blurbs .et_pb_blurb:hover .et_pb_main_blurb_image {
-webkit-backface-visibility: hidden;
transform: translate(0%, -50%) scale(3);
top: 50%;
opacity: 0.1;
transition-delay: 0s;
}

.free_impi_blurbs .et_pb_blurb:hover:before {
opacity: 1;
transition-delay: 0.3s;
}

.free_impi_blurbs .et_pb_blurb:hover .et_pb_blurb_content .et_pb_blurb_container {
transition-delay: 0s;
opacity: 0;
transform: translate(0, 120%);
}

/*Responsive*/

@media only screen and (max-width: 1390px) {
.free_impi_blurbs .et_pb_row {
width: 90% !important;
}

.free_impi_blurbs .et_pb_row .et_pb_blurb {
padding-right: 30px !important;
padding-left: 30px !important;
}

}

@media only screen and (max-width: 980px) {
.free_impi_blurbs .et_pb_blurb .et_pb_main_blurb_image {
top: 70px;
}

.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content {
padding-top: 35px;
}
}

@media only screen and (max-width: 767px) {
.free_impi_blurbs .et_pb_blurb .et_pb_blurb_content {
padding-top: 52px;
}
}

Then go to Page settings:

Page Settings

And paste the CSS code inside the Custom CSS box:

Custom CSS box

Click Save and Update the page.

Cloning the module

Now, let’s clone our blurb to the other two columns.

Cloning the module

Click the clone icon twice, and two new modules will pop up, drag and drop them to empty slots.

Edit the content as per your needs. Change the title, content box and the icon.
To change the title that appears on hover, go to module settings and select Advanced tab. See the Before box and find the title text there. Also, to change the blurb module background, change the colour that’s inside the Main Element box, that you can also find in Advanced tab.

That’s it, all done!