How to Add Hover Effects to Divi’s Blurb Module Using CSS. 

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to ma

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to ma

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to ma

Add a Three-Column Row

The first thing you need to do is add a three-column row to a new section on a new page or existing page. We’ll show you how to add the first Blurb Module and you afterward, you can add Blurb Modules to the other columns as well by repeating the same steps.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Make the Row Fullwidth

The next thing you’ll need to do is make the row fullwidth. To do that, open your row settings and go to the Design tab. Within the Design tab; enable the ‘Make This Row Fullwidth’ option within the sizing subcategory.

Apply Column Padding

The next thing you’ll need to do is add some column padding while you’re still in the Design tab of the row settings. Scroll down and add 5% to the bottom padding of column 1.

Apply Box Shadow & Border Radius to Column

And the last thing you’ll need to do within the row settings is go to the Advanced tab. Within the Advanced tab, scroll down to the Column 1 Main Element and copy and paste the following CSS code lines: -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10); -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10); box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10); border-radius: 6px; After you are done with , you can close the row settings.

Add Image Module

The next thing we’re going to do is add an Image Module to the first column. Technically, this is not a part of the Blurb Module but in its final result, it does look like they belong together. That’s mainly because we’re using the column as a kind of box that gathers all the modules and makes them fit with one another. Upload an image and leave the Image Module as it is for now.

Add Blurb Module

The next thing we’ll need to add to the row is the Blurb Module. Once you’ve added the Blurb Module, you’ll need to make several changes to it. Start by adding the header text, content text and choosing the icon and move on to the Design tab. 

Customize Icon

Within the Design tab, the first thing you’ll come across is the Image & Icon subcategory. Within that subcategory, make sure the following changes apply:

  • Icon Color: #FFFFFF
  • Circle Icon: YES
  • Circle Color: #004370
  • Image/Icon Placement: Top
  • Use Icon Font Size: YES
  • Icon Font Size: 45px (desktop), 40px (tablet), 37 (phone)

Customize Header Text

Scroll down the same tab and make the following changes to the Header Text subcategory:

  • Header Font Size: 16 (desktop & tablet), 14 (phone)
  • Header Text Color: #004370
  • Header Line Height: 2.2em

Add Custom Margin

Next, you’ll have to add the Custom Margin to the Blurb Module:

  • Top: 25%
  • Right: 5%
  • Left: 5%
  • Bottom: 5%

Add Bottom Margin to Blurb Title

Finally, go to the Advanced tab and add ‘3px’ to the bottom margin of the Blurb Title:

Adding Hover.css Effects to the Modules

The last part of this post involves adding the hover.css effects. We’ll add the hover effects to the Image Module and Blurb Module first and in the next part of this post we’ll add a hover effect to only one element of the Blurb Module.

Add the CSS Class to the Image Module

Open the settings of your image and go to the Advanced tab. Within the Advanced tab, write down the hover effect CSS class that you want to use. In this case, we’re applying the ripple out effect which has ‘hvr-ripple-out’ as its CSS class name. Again; you can find these class names within the hover.css file in your zipped folder.

Add the CSS Class to the Blurb Module

Likewise, open the Blurb settings and go to the Advanced tab. In this case, we’re going to apply the shrink hover effect to the complete module. So, type down ‘hvr-shrink’ in the CSS Class field.

Add The CSS Code

Moving on, add the following CSS code lines to the settings of your page by clicking on the following button and add following lines of code. .hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); } @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } .hvr-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; } .hvr-ripple-out:before { content: ”; position: absolute; border: #004370 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out; } #center.et_pb_blurb_0.et_pb_blurb h4 { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; } #center.et_pb_blurb_0.et_pb_blurb h4:before { content: “”; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #004370; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before { left: 0; right: 0; } #center.et_pb_blurb h4 { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden; } #center.et_pb_blurb h4:before { content: “”; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #004370; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before { left: 0; right: 0; } These are almost the exact same CSS code lines as you can find in the hover.css file. The only thing that differs is the border color that is being used for the ripple out effect. It’s the same color as the one being used in the circle icon.

Use Hover.css Effects For Separate Elements Within The Blurb Module

The third effect we have added to this blurb is the line that appears after hovering over the Blurb Title. The Blurb Module contains different elements. Therefore, we cannot just simply use the hover.css class in the list. Instead, we have to assign a CSS ID to the module and use the CSS class specifically assigned to the Blurb Title.

Add The CSS ID to Blurb Module

Start by adding the CSS ID to the Blurb Module. In this case, we’re using ‘center’. The class name you use within the code differs from module to module. If you want to make this apply to only one module, you’ll have to use the class assigned to the Blurb Title of that particular module: