In this tutorial I am going to show you how you can change the background colors, icon color and font colors when you hover over the Divi Blurb Module. I also threw in a spinning icon animation just for fun.

View The Live Demo

Let’s Get Started

 

Creating the Modules

The first thing we are going to do is create a 3 column row. You can use other column options but I think 3 is the perfect layout for this feature.

1. In the section you want to add the modules, create a new 3-column row

 

2. Next you will add a blurb module in the first column.

 

3. Open up the blurb settings and give it a title, url and an Icon. You could use an image if you wanted to but in this tutorial I will stick with the icons.

 

4. Give the icon a color, Image Placement is on the left, turn off animation and add content.

 

5. Now open up the “Custom CSS” tab and give the blurb module the following class: mp_m_blurb_change_color

 

6. Select “Save and Exit” and then clone the blurb module twice and then move the extra two over into the next two columns. That way you only have to change the title, image and content on the other two.

 

 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS

 

/*------------------------------------------------*/
/*----------------[GQ COLOR CHANGE]---------------*/
/*------------------------------------------------*/

	.mp_m_blurb_change_color, .mp_m_blurb_change_color h4, .mp_m_blurb_change_color .et-pb-icon {
	    	transition: all 0.4s ease-in 0s;
    		-webkit-transition: all 0.4s ease-in 0s;
    		-o-transition: all 0.4s ease-in 0s;
    		-moz-transition: all 0.4s ease-in 0s;}

	.mp_m_blurb_change_color {
		padding: 20px;
	    	border-radius: 5px;}

	.mp_m_blurb_change_color h4 {
    		color: #2ea3f2!important;
		font-weight:700;}

	.mp_m_blurb_change_color:hover {
		background-color: #2ea3f2;
		color: #fff;}

	.mp_m_blurb_change_color:hover h4 {
    		color: #275c80!important;}

	.mp_m_blurb_change_color:hover .et-pb-icon {
    		color: #fff!important;
	    	-webkit-transform: rotate(360deg);
    		transform: rotate(360deg);}

 

If you want to speed up the animation process, just decrease the animation speed.

 

If you want to change the color of the icon, header, text or background, you can change them in these places…

 

And if you want to remove the spinning icon animation just remove these lines.

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

Latest posts by Geno Quiroz (see all)

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest