Home / Divi Tips and Tricks / Create ‘Reveal On Hover’ animation on Divi Blurb module
Divi Tips and Tricks

Create ‘Reveal On Hover’ animation on Divi Blurb module

Hello guys! I am back with another fun tutorial. Simple and quick. This time we are going to add a nice hovering animation on Divi blurb module’s content. To the icon, the title and the content. Let’s have a look at the demo first.

Step one –  Create ‘Reveal On Hover’ animation on Divi

Add a section and a three columns row. (Depend on your needs. Here I am telling you what I did on my demo). And add three blurb modules then style it the way you want. We need to add a class to each module. I added ds-blurb for all three.

Below is what I did. Icon on the top, the title and the small text below.

* Important – Do not forget to give a fixed height for all three blurs, like below. I gave 260px as height in my version. 

Step Two 

Now simply copy and paste the below CSS code snippet to Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area or to your child theme’s style.css file. (use any method you use to add custom css).

/*__Add Reveal on Hover effect on Divi Blurbs__*/
 
.ds-blurb .et_pb_blurb_container {
  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;
}
 
.ds-blurb .et-pb-icon {
  position: relative;
  top: 50px;
  -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:hover .et-pb-icon {
  top: 0px;
  font-size: 45px;
}
 
.ds-blurb:hover .et_pb_blurb_container {
  top: 0px;
  opacity:1;
}

That’s it guys. Now you can add an attractive animation on Divi .It will do the trick ;). Please comment below if you need any help.

Also, don’t forget to read our blog .

Similar Posts

2 Comments

Leave a Reply

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