Style your Divi Blurbs like Material Design Cards

Style a row of Divi Blurbs to appear as cards/blocks — with a cool animation on hover.

Here is an example video of it in action:

Video 1: https://i.gyazo.com/cde555daaf878bc9257156d2babca838.mp4

Video 2: https://i.gyazo.com/2649e6b5e8a7a3b0410bf277b6885540.mp4

Screenshot 1: https://i.gyazo.com/f6f7979824a90f09bbb254dd0077c5b0.png

Screenshot 2: https://i.gyazo.com/fba4c36a181cdf6bd4c9fa17de6323a6.png

The code below will override all blurbs to have the cool hover effect. But if you specifically use the .blurb-row class on a Row module, it will also give them the card styling too — which basically adds:

• some padding
• white background
• shadow
• ensures the blurbs are all the same height, within the row

In addition to adding the .blurb-row class to the Row module, you will also probably want to set:

• Customer Gutter Width: 1
• Equalize Column Heights

/* -- BLURBS -- */

.et_pb_section .et_pb_row.blurb-row {
	overflow: visible;
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column {
	display: flex;	
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb {
	flex-grow: 1;
	padding: 30px;
	-webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	transition: all 0.4s ease-in-out;
	background-color: white;
	position: relative;
}

@media (max-width: 980px) {
	.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb {
		margin-bottom: 30px !important;
	}
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb:hover {
	-webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	-moz-box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	-webkit-transform: translate(0, -4px);
	transform: translate(0, -4px);
	background-color: rgba(255,255,255,0.95);
	z-index: 1;
}

.et_pb_blurb .et-pb-icon {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0.3;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.et_pb_blurb:not(:hover) .et-pb-icon {
	color: #c29445 !important;
}

.et_pb_blurb:hover .et-pb-icon {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	opacity: 1;
}

.et_pb_blurb:hover h4 {
	color: #c29445;
}

.et_pb_main_blurb_image {
	margin-bottom: 1em !important;
}

.et_pb_blurb .et-pb-icon {
	font-size: 56px;
}

.et_pb_blurb h4 {
	padding-bottom: 1em !important;
}

/* if blurb has icon on top, and is left aligned, then also left align the image/icon too */
.et_pb_blurb.et_pb_text_align_left.et_pb_blurb_position_top .et_pb_main_blurb_image {
	text-align: left;	
}

/* -- END BLURBS -- */