Amazing Blurb Hover Effect

I saw a question in one of the great Divi Facebook groups which asked for a solution looking very similar to the one in this tutorial. Since I found the effect interesting, I decided to replicate it and share the layout and tutorial with the community. This simple tutorial is based on pure customization within the Divi Builder and custom CSS. You can download the layout and CSS code for free at the bottom of this post.

1. Creating Row With Blurbs

We will need a row with 5 columns (or any number that suits your needs). In each column, we will have a blurb module. I decided to go with free icons from Icon8.com for the purpose of this tutorial but you can also use other sources such as Divi Icons Pro from B3 Multimedia. This great plugin will add dozens of awesome icons to your blurbs. I did the following customization of the blurbs and the row:

Row

• Background: white
• Rounded Corners: 5px
• Box Shadow: first option (second table from the left)
• Box Shadow Blurb Strength: 50px
• Box Shadow Color: rgba(0,0,0,0.08) (all the other box-shadow properties remain default)
• Spacing: 0px for bottom-padding and top-padding
• Use Custom Gutter Width: yes
• Gutter Width: 1
• CSS Class: custom_blurbs (we will need the class for our CSS code later)
• Custom CSS → Main Element: “overflow: visible” (paste the code without bracklets to the CSS tab)
• I also used transform: translateY(-95px) to move the row into the previous section but this is not essentially important

Title Text

• Title text family: Poppins
• Title text size: 22px
• Title text weight: bold
• Title text color: #333333 (default for Divi)

Body Text

• Body text family: Poppins
• Body text size: 16px
• Body text weight: light
• Body text color: #1abc9c (you can use your own color)

Blurb Image

• Image Width: 50px (go to Design tab → Sizing and you’ll find the image-width option)
• Spacing: margin-bottom: 30px (you can add this code to Advanced tab → custom CSS → Blurb Image or to another place where you have your CSS)

Blurb Border

• Right Border: 1px solid rgba(51,51,51,0.1) → I didn’t give any border to the last blurb since we only want to separate them from each other and I also removed the border from tablet and mobile view

2. Adding “Read More” Arrow

I used the text module since I believe that it’s extremely easy to customize. I added the module right under my blurb in each column so there was a blurb and a text module in each of my 5 columns. I did the following customization to the text module:

• Background: white
• Sizing → Width: 30px (you can go to Design tab of the module → Sizing and set the width, height, and module alignment)
• Sizing → Height: 30px
• Sizing → Module Alignment: center
• Rounded Corners: 50%
• Text Font: Poppins
• Text Alignment: center
• Text Size: 17px
• Text color: #1fbd9e
• Text Font Weight: ultra bold
• CSS Class: more_info (we will need the class later)
• I used this symbol for the arow “❯” but you can use any other arrow or symbol you like. Simply paste it to the text module.

3. Styling the Columns

The columns within the row will actually help us achieve our effect a lot, so let’s do some customization. I applied this styling to all of my columns:

• Background Color on Hover: #1ABC9C
• Spacing: padding-top: 70px and padding-bottom: 50px
• Custom CSS → Main Element: margin-top: -25px; margin-bottom: -25px → I pasted this code to the Advanced tab of each column → Custom CSS → Main Element … you can also paste your CSS wherever you prefer to have it
• Rounded Corners: 5px
• Transition: Transition Duration to 0ms → This will prevent the animation when the background color is changed and I found the transition nicer without it

4. Adding CSS For Hover Effects

Now we have everything prepared for our CSS code. You can write your CSS in several places (watch this great video by Josh Hall where you can find out more). In the demo file I prepared for you, you’ll find the code in a code module on the same layout as the blurbs.

Moving Blurbs Upwards on Column Hover

When we hover on a column (not just a blurb because we added some spacing to the column), we want the blurb content to move up a bit to make “space” for our arrow. We will also need some animation after we end hovering, so that the blurb moves downwards again smoothly. In order to achieve that, we’ll need the following CSS:

.custom_blurbs .et_pb_column:hover .et_pb_blurb {
transform: translateY(-20px);
transition: all .3s ease-in-out;
}

.custom_blurbs .et_pb_column .et_pb_blurb {
transition: all .3s ease-in-out;
}

Changing Blurb Text Color on Hover
We moved the blurbs upwards already but on the green column background, the text wouldn’t be very visible. Therefore, we need to change its color to white. For the blurb title text, Divi uses h4 and for the blurb body text, we can easily target a paragraph (p). We will use the following code:

.custom_blurbs .et_pb_column:hover .et_pb_blurb h4,
.custom_blurbs .et_pb_column:hover .et_pb_blurb p {
color: white;
}

Changing Image Color on Hover

Since our column background will be green on hover, our blurb image won’t be visible anymore. The easíst way to fix it and change the image’s color to white is to use a filter. With contrast(0) brightness(2) I was able to recolor the image to white:

.custom_blurbs .et_pb_column:hover img {
filter:contrast(0) brightness(2);
}

Making “Read More” Arrow to Appear Only on Hover

The best way to hide the module and show it only on hover is to use different opacities. We will use zero opacity as default one and increase it to 1 as soon as we hover the column. Also, we know that our arrow should move downwards on hover exactly as in our demo. We’ll use negative transform:translateY as default and change this to 0 as soon as we hover the column. In order to achieve a nice animation, we’ll add some transition.

.custom_blurbs .more_info {
opacity: 0;
transform: translateY(-30px);
transition: all .3s ease-in-out;
}

.custom_blurbs .et_pb_column:hover .more_info {
opacity: 1;
transform: translateY(0);
transition: all .3s ease-in-out;
}