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>

Do you like the WordPress theme I am using? You can purchase the Divi theme from Elegant Themes. There’s a discount link below:

Elegant Themes

Just letting you know, I do get compensated if you make any purchases after using the link above or any of the links that lead to elegant themes on my website.

Sponsors

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!