How To Add A Beautiful Hover Reveal Effect To The Divi Blurb Module Tutorial by Pee Aye Creative

How To Add A Beautiful Hover Reveal Effect To The Divi Blurb Module

In this tutorial I will show you how to add a beautiful hover reveal effect to the Divi Blurb module with a snippet of CSS.

Add A Custom CSS Class To The Divi Blurb Module

The first step is to place the Divi Blurb module in your layout and add an image, title text, and body text. Now go to the Blurb module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-hover-blurb” to the CSS Class input field. This allows us to only target this particular module with the CSS. 

add custom CSS class to the Divi Blurb module for a hover effect

Make Some Design Adjustments

After adding your image and text, you can style the blurb however you want. If you want to match our example in the video and match the CSS, then I will provide the items I modified here for you to replicate.

  • Add an image
  • Center the text
  • Add 15px border radius to the image

Note that if the image is horizontal, you will need to take extra care to make sure everything fits well. This may require you to make the title text smaller and shorten the body text.

Add The CSS Snippet For The Hover Effect

Now for the fun part! Go ahead and copy the CSS snippet below and add it to your site. Then afterwards I will note a few important parts of the code that you will need to adjust depending on your image size and amount of text. I recommend watching the video to see this in action.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*change the cursor when hovering over the module*/

.pa-hover-blurb .et_pb_blurb_content {
	cursor: pointer;
}


/*restrict the display of the description text before hovering*/

.pa-hover-blurb .et_pb_blurb_description {
	display: none
}


/*add a smooth ransition effect*/

.pa-hover-blurb .et_pb_blurb_container,
.pa-hover-blurb .et_pb_image_wrap {
	transition: all 0.4s ease-in-out;
}


/*restrict the triggering of hover effect when we hover on the title and align title to center*/

.pa-hover-blurb .et_pb_module_header {
	position: absolute;
	left: 60%;
	transform: translateX(-60%);
	pointer-events: none;
	width: 100%;
}


/*provide padding to description text so is doesn’t take the full width*/

.pa-hover-blurb .et_pb_blurb_description {
	padding: 0 5%;
}


/*place the whole content on image on hover and place it in center with different text color*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_container {
	position: absolute;
	top: 35%;
	transform: translateY(-35%);
	color: #ffffff !important;
	cursor: pointer;
}


/*place the overlay effect on the image on hover*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_image_wrap:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	left: 0;
	top: 0;
	opacity: 0.5;
	border-radius: 15px!important;
}


/*make the position of the title relative on hover*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_module_header {
	position: relative;
	text-align: center;
}


/*change the title text color and font size on hover*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_container .et_pb_module_header {
	color: #ffffff;
	font-size: 2rem;
}


/*show the description text on hover*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_description {
	display: block;
}


/*zoom the image on hover*/

.pa-hover-blurb .et_pb_blurb_content:hover .et_pb_image_wrap {
	transform: scale(1.10);
}

Normal

after applying CSS for the Divi Blurb hover effect

Hover

before applying CSS for the Divi Blurb hover effect

As mentioned, you will probably need to make some slight adjustments. The code snippet above is the one I used in the video, but your situation may be a little different. This is trial and error and you will need to use what works best for you.

It’s hard to show by words, so please watch the video. But some things to check are the header position (60% in my code), the description padding (0 5% in my code), the blurb container position (35% in my code), the header font size (2rem in my code), and the image scale (1.10 in my code). Adjust those to your liking and you are done!

10
Last updated Jun 8, 2021 @ 11:30 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Pin It on Pinterest

0

Your Cart