TIPS & TRICKS, TUTORIAL

Module Blurb:
New Style Hover Expand

Follow us on

Fabio Sarcona, Web Developer, Italy

17 Jun 2016

Share
Tweet
Share
0 Shares

For my last child theme, Foody, I added a new style for the Blurb Module. It is an effect on mouse over that allows you to show the contents and social icons.

This style can be useful when you want to create a Testimonials section or to show your services or members of the team.

I bet you’ll be interested to see how to get this new style and then, I want to start right away by showing the live demo of the final result:

LIVE DEMO

1. Step

The first step is to download the file.JSON and import it into Divi library.

NOTE: If you do not know how to use the functions of Import / Export of Divi, you can read this Complete Guide, I wrote for Aspen Grove Studios.

DOWNLOAD TEMPLATE

2. Step

The second step and copy and paste the CSS code in the options panel, or if you use a Child Theme, you can copy the code in the style.css file. You’ll notice that in the CSS code I added some comments, this to make easy customization.

/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 230px;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

How to customize the HTML code

At this point, it has everything you need to use this new module Blurb for your projects, but I also want to show you what it looks like the HTML code, so you can easily customize every element.

As you can see, for the title and the subtitle I did not use the default fields of the module Blurb, but I added all the content in the editor. So, title, subtitle, the content visible on hover and social icons will be customized here.

NOTE: for this module I used the Font Awesome icons, so if your site has not installed the Font Awesome, the icons will not be visible.

#Update:

To respond to the request of some users to have multiple user options, I added two new layouts. In the first I replaced the social icons with icons of telephone, email, and maps, where you only have to replace the placeholder with your phone number and email address. Instead, the second layout I removed icons and added a button that you can use as a call to action.

This two new layout, you find them in the folder that you can download by clicking the green button positioned at the beginning of this tutorial. there is a new file (“Blurb Hover 2 NEW STYLE“) that you will need to import it into your library. Then you will need to copy and paste the code found inside the toggle below.

NOTE: The CSS code below is specific to the two new layouts.

LIVE DEMO 
/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 100%;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

/*--------------------- Button Hover Blurb  --------------------------*/

.button_hover_blurb a { 
 color: #fff;  /****** ---> Customize here the Button color text ******/
 font-weight: 700;
} 
.button_hover_blurb { 
 background-color: #1fd4c1; /****** ---> Customize here the Background-color button ******/
 display: inline-block;
 position: relative;
 padding: 0.6em 1.3em;
 margin-top: 6%;
 border-radius: 30px;
 cursor: pointer;
 transition: .3s;
 }
.button_hover_blurb:hover {
 opacity: 0.7;
}

Conclusion

And that’s it. As always, if you liked this article, I invite you to subscribe to the newsletter for not miss the next article and exclusive free resources for members.

Let me know what you think of this tutorial in the comments 😉

Share
Tweet
Share
0 Shares

1 Comment

  1. Brian
    Brian on 19/07/2018 at 10:19 am

    Hey this looks great, when I try to import the JSON I get the error “Invalid Format”, can you suggest why? I have no plugins on the site yet to conflict or restrict anything.

    Thanks in advance

    Reply

Submit a Comment

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