Module Blurb: New Style Hover Expand

by | Jun 17, 2016 | Tips & Tricks, Tutorial | 11 comments

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 Layout

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.

 css-option-page-compressor

CSS Code: copy and paste this code
/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- 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.

card-expand

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

 

CSS Code for New Layout : copy and paste this code
/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- 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;
}

Conclusions

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 😉


Author | Fabio Sarcona

I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! 😀


Get the latest resources and freebies in your inbox

Join over 7000 people and get access to free resources, exclusive discounts and the latest tutorials. All directly in your mailbox!

Your email is safe 💌 . I hate SPAM same as you!

Pin It on Pinterest

Shares
Share This