Divi tutorial – Blurb Module hover effects

Mar 24, 2016

This is a hover effect that I used on the front page of yatesdesign.com.au. In those blocks I used Font Awesome icons as I needed a Drupal icon. In the following tutorial, I’ll use the Divi Blurb module to make things a little simpler.

If you’d prefer to just skip the tutorial, you can download the layout and CSS in one handy little zip file. You can add the CSS code to your CSS file of choice or add it to Divi’s Custom CSS section (which can be found in Divi Theme Options > General tab > Custom CSS). To import the layout file follow this post on the Elegant Theme website.

Here’s a preview of how they will look when we’re done:

This is the blurb title field

This is the blurb description field.
You should probably change it.

This is the blurb title field

This is the blurb description field.
You should probably change it.

This is the blurb title field

This is the blurb description field.
You should probably change it.

First we need to set up the row correctly. So add a row with 2, 3 or 4 columns & then use these settings:

  • Enable “Make This Row Fullwidth:”
  • Enable “Use Custom Gutter Width:” & set it to “1”
  • Set “Custom Padding” to 0
  • Enable “Keep Custom Padding on Mobile:”
  • In the Custom CSS tab, set the CSS Class to “blurb-hover”

In each column add a blurb module and a button module. The blurb module has the icon, title and text field, we’ll use the button module to handle the link so the link you place in the blurb module isn’t important. Set the link you want in the button module, the button text isn’t important as it will be hidden.

Once you’ve got all that set up correctly it should look something like this:

This is the blurb title field

This is the blurb description field.
You should probably change it.

This is the blurb title field

This is the blurb description field.
You should probably change it.

This is the blurb title field

This is the blurb description field.
You should probably change it.

Now all we need to do is add the CSS. You can add this code to your CSS file of choice or add it to Divi’s Custom CSS section (which can be found in Divi Theme Options > General tab > Custom CSS.


/*Divi Blurb Module hover effects by yatesdesign.com.au*/
.blurb-hover .et_pb_column:hover {
 background: #0f2c41;
}

.blurb-hover .et_pb_blurb p {
 zoom: 1;
 filter: alpha(opacity=0);
 opacity: 0;
 -webkit-transition: opacity .2s,-webkit-transform .35s;
 transition: opacity .2s,transform .35s;
 -webkit-transform: translate3d(0,40px,0);
 transform: translate3d(0,40px,0);
}

.blurb-hover .et_pb_column:hover p {
 color: #fff;
 -webkit-transition-delay: .05s;
 transition-delay: .05s;
 -webkit-transition-duration: .35s;
 transition-duration: .35s;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
 zoom: 1;
 filter: alpha(opacity=1);
 opacity: 1;
}

.blurb-hover .et_pb_column:hover h4 {
 color: #dc1d49;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

.blurb-hover .et_pb_blurb h4 {
 -webkit-transition: -webkit-transform .35s;
 transition: transform .35s;
 -webkit-transform: translate3d(0,40px,0);
 transform: translate3d(0,40px,0);
}

.blurb-hover .et_pb_column:hover .et-pb-icon {
 background-color: transparent !important;
 color: #fff !important;
 border-color: #fff !important;
 -webkit-transition-delay: .05s;
 transition-delay: .05s;
 -webkit-transition-duration: .35s;
 transition-duration: .35s;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

.blurb-hover .et_pb_blurb .et-pb-icon {
 background: transparent !important;
 -webkit-transition-delay: .05s;
 transition-delay: .05s;
 -webkit-transition-duration: .35s;
 transition-duration: .35s;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,40px,0);
 transform: translate3d(0,40px,0);
}

.blurb-hover .et_pb_column {
 position: relative;
}

.blurb-hover .et_pb_button {
 zoom: 1;
 filter: alpha(opacity=0);
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.

Thanks for reading!

If you found this post helpful you can show your appreciation by leaving a review on the Yates Design Facebook page:

If you need help...

I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.

Drop me an email at hello@yatesdesign.com.au to discuss.

Ready to launch a new project? Let's work together 

Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!

Pin It on Pinterest

Share This