/ / Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb
Divi Tips and Tricks

Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb

Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb

Hello guys! This is the 2020 updated version of the tutorial of adding cool Divi hover effects to the Blurb Module. This is super easy but looks great. Some kind of interactivity is always a nice way to grab your visitor’s attention.

Let’s have a look at the demo first.

Looks cool. Right? lets dive in and see how to create something similar in your own website.

Step one –  Create the blurb design

Add a section and a three columns row. (You can do whatever depends on your needs. Here I am telling you what I did on my demo version). Then add three blurb modules and style them the way you want.

Below is what I did. An icon on the top, the title, and the small description text below. We are going to hide the description and show it on hover. That’s how it works basically.

Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb

We need to add a class name to each blurb module. I added ds-blurb for all three. Do the same in your version.

Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb

* Important – Do not forget to give a fixed height for all three blurs, like below. I gave 300px as height in my version. But this depends on your content. Find the best size and set for all three blurbs.

Cool Divi Hover Effects: Create ‘Reveal On Hover’ animation on Divi Blurb

Ok, now we are done with the first step in creating Divi hover effects. creating the blurb module design. Let’s move forward and do the CSS magic happen.

Step Two: Add CSS to create the Divi hover effect

Now simply copy and paste the below CSS code snippet to your website. There are few ways of adding custom CSS to a Divi/WordPress website.

You can simply paste this into the Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area. (use any method you use to add custom CSS).

If you need more information on adding custom CSS to your WordPress site please read the below article.

/*__________Add Reveal on Hover effect on Divi Blurbs__________*/
 
.ds-blurb .et-pb-icon {
  position: relative;
  top: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ds-blurb .et_pb_module_header {
  position: relative;
  top: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ds-blurb .et_pb_blurb_description {
  position: relative;
  top: 50px;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
 
/*__________Hover Effects__________*/
 
.ds-blurb:hover .et-pb-icon {
  top: 0px;
  font-size: 65px;
}

.ds-blurb:hover .et_pb_module_header {
  top: 0;
}
 
.ds-blurb:hover .et_pb_blurb_description {
  top: 0px;
  opacity:1;
}

That’s it, guys now you can add attractive cool hovering effects to the Divi blurb module yourself. Just in a few mins. No extra plugin used. The above simple CSS snippet will do the trick ;).

If anything not clear enough to you, try the video.

Please comment below if you need any help.

Similar Posts

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *