3 Divi blurb hover effects (CSS)

Oct 23, 2018

Now Divi has the option of turning any module into a link, I often find myself making sections with blurbs which are linked to other areas of the website.

The only issue though is it’s not that obvious these blurbs are links, as the only thing to show they’re “clickable” is the mouse pointer changing on hover, which is easy for the user to miss.

To make it more obvious I’ve created 3 different hover effect for blurbs using a few lines of CSS.

In this tutorial I’m going to walk you through how to replicate these effects on your own website.

I’ve tried to make it as easy as possible to follow along for those who don’t code, but if you would prefer to skip the tutorial and just download the JSON, you can download the template here.

Also checkout the demo here →

How to..

Hover effect 1

Step 1: Add a blurb module to a row with either 2 or 3 columns.

Step 2: Go into the blurb settings, and add the following settings:
– Use Icon toggle: Yes (select icon you’d like to use)
– Module Link URL: Add your target link
– Background color: #f9f9f9
– Icon color: #ff3365
– Circle Icon: Yes
– Circle color: rgba(255,51,101,0.1) (same color as icon, set to 0.1 opacity)
– Text orientation: centre
– Custom padding: 40px 30px 30px 30px

(Note: If you’d like to change the styling to your own, the only settings which you shouldn’t change is the custom padding.)

Step 3: In the “Advanced” tab, add “hover-blurb-arrow” to the CSS class box, then Save & Exit, and publish the page.

Step 4: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

/*===== Hover Blurb Arrow effect 1 =====*/

.hover-blurb-arrow {
overflow: hidden;
}

.hover-blurb-arrow:after {
content: '→';
color: white;
font-size: 22px;
bottom: -25px;
right: -60%;
position: relative;
padding: 6px 20px;
background: #5a44ff;
opacity: 0;
transition: all 0.4s;
}

.hover-blurb-arrow:hover:after {
opacity: 1;
right: -50%;
}

Step 5: Save the CSS settings and you’re done!

How to..

Hover effect 2

Step 1: Add a blurb module to a row with either 2 or 3 columns.

Step 2: Go into the blurb settings, and add the following settings:
– Use Icon toggle: Yes (select icon you’d like to use)
– Module Link URL: Add your target link
– Background color: #f9f9f9
– Icon color: #ff3365
– Circle Icon: Yes
– Circle color: rgba(255,51,101,0.1) (same color as icon, set to 0.1 opacity)
– Text orientation: centre
– Custom padding: 50px 0px 20px 0px

(Note: If you’d like to change the styling to your own, the only settings which you shouldn’t change is the custom padding.)

Step 3: In the “Advanced” tab, add “hover-blurb-arrow-2” to the CSS class box, then Save & Exit, and publish the page.

Step 4: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):


/*===== Hover Blurb Arrow effect 2 =====*/

.hover-blurb-arrow-2 {
overflow: hidden;
}

.hover-blurb-arrow-2 .et_pb_blurb_content {
padding-left: 30px;
padding-right: 30px;
}

.hover-blurb-arrow-2:after {
content: 'Learn more →';
color: white;
font-size: 14px;
bottom: -50px;
display: block;
position: relative;
padding: 10px 20px;
background: #5a44ff;
opacity: 0;
transition: all 0.4s;
}

.hover-blurb-arrow-2:hover:after {
opacity: 1;
bottom: -20px;
}

Step 5: Save the CSS settings and you’re done!

How to..

Hover effect 3

Step 1: Add a blurb module to a row with either 2 or 3 columns.

Step 2: Go into the blurb settings, and add the following settings:
– Use Icon toggle: Yes (select icon you’d like to use)
– Module Link URL: Add your target link
– Background color: #f9f9f9
– Icon color: #ff3365
– Circle Icon: Yes
– Circle color: rgba(255,51,101,0.1) (same color as icon, set to 0.1 opacity)
– Text orientation: centre
– Custom padding: 40px 30px 30px 30px

(Note: If you’d like to change the styling to your own, the only settings which you shouldn’t change is the custom padding.)

Step 3: In the “Advanced” tab, add “hover-blurb-arrow-3” to the CSS class box, then Save & Exit, and publish the page.

Step 4: Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):


/*===== Hover Blurb Arrow effect 3 =====*/

.hover-blurb-arrow-3 {
overflow: hidden;
}

.hover-blurb-arrow-3:after {
content: '→';
border-radius: 50%;
color: white;
font-size: 20px;
bottom: -45px;
right: -60%;
position: relative;
padding: 15px 17px;
background: #5a44ff;
opacity: 0;
transition: all 0.4s;
}

.hover-blurb-arrow-3:hover:after {
opacity: 1;
right: -48%;
bottom: -10px;
}

Step 5: Save the CSS settings and you’re done!

Bonus

How to improve the user experience on mobile

Hover elements don’t work very well on mobile. Especially ones like this which are links, but don’t jump out as links unless they’ve hovered on. This is bad for mobile users as they will likely not “click” them and navigate to that page.

To get around this, the code below will make it so on mobile they appear in their hovered state and show the user that the blurbs are “clickable”.

Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

@media only screen and (max-width: 980px) {

.hover-blurb-arrow:after {
opacity: 1;
right: -50%;
}

.hover-blurb-arrow-2:after {
opacity: 1;
bottom: -20px;
}

.hover-blurb-arrow-3:after {
opacity: 1;
right: -48%;
bottom: -10px;
}
}

Conclusion

Just the beginning…

These effect can either be used as they are, or as a foundation to build upon. For example with a little bit more CSS, I customised Hover Effect 2 into the following section:

3 Column Services Section

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

Related posts

Change image on hover in Divi with CSS

Having an image which changes on hover is a cool effect, but unfortunately it's not a native feature of Divi. Luckily though with a little bit of CSS it's an easy effect to build yourself. In part 1 of this tutorial I'll walk you through step-by-step on how to create...

CSS 3D Website Mockups in Divi

3D mockups are a great way to show off your web design work, and also a lot easier to make than you might think! There are a couple different ways you can achieve this look: 1. Photo editing software (e.g. Photoshop) 2. CSS The problem with the first method is 1) you...

How to change the sub menu font size in Divi

Changing the font size of the header menu in Divi is simple to do using the Theme Customiser. However, it only lets you choose the font size for the main links, not the sub-menu that drops down when grouping menu items. Here's a simple CSS fix that will let you change...