Divi Theme Blurb Modification – Hover Effect

This video will show you how to modify blurb module in Divi.

I know all of you are always looking for ways to make your websites stand out of the crowd. This blurb modification bounces on hover, causing attention towards it. The best part about this modification is that it is totally responsive. I have checked it against most of the latest devices but if you do see a problem please do let me know.

Looking for other Divi users? Join our Divi Theme Tutorials Group on Facebook.

/* blurb modifications */

.et_pb_blurb:hover .blurb_content_hover {
height: 100%;
}

div .blurb_content_hover p:first-child {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
color: #800000;
padding-bottom: 5px;
}

div .blurb_content_hover p:last-child {
font-size: 16px;
color: #444444;
}

.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);
}

div .blurb_content_hover {
-webkit-transition: .25s;
-moz-transition: .25s;
position: absolute;
background: #fff;
transition: .25s;
color: #333;
padding: 30px;
height: 70px;
width: 100%;
bottom: 0;
font-size: 18px;
text-align: center;
}

.button_hover_blurb {
background-color: #444444;
display: inline-block;
position: relative;
padding: 0.6em 1.3em;
margin-top: 6%;
border-radius: 30px;
cursor: pointer;
transition: .3s;
}

.button_hover_blurb:hover {
background-color: #666;
}

.button_hover_blurb a {
color: #ffffff;
font-weight: 700;
}

.blurb_hover .et_pb_main_blurb_image {
border: 3px solid #222;
height: 220px;
}

.button_hover_blurb {
background-color: #444444;
display: inline-block;
position: relative;
padding: 0.6em 1.3em;
margin-top: 6%;
border-radius: 30px;
cursor: pointer;
transition: .3s;
}

.blurb_hover .et_pb_blurb_content {
overflow: hidden;
}

@media all and (max-width:980px) {
.blurb_hover .et_pb_main_blurb_image {
border: 3px solid #222;
height: 198px;
}

div .blurb_content_hover p:first-child {
font-size: 16px;
}
}

@media all and (min-width:1024px) and (max-width:1030px) {
div .blurb_content_hover {
height: 100px;
}}

These are the settings for the blurb module:

Image/Icon Placement: Top

Text Orientation: Center

<div class="blurb_content_hover">

Title

<span class="button_hover_blurb"><a href="#">Learn More</a></span>

</div>