All Collections
FAQ's and Troubleshooting
Recreating Elegant Themes "Hover" example
Recreating Elegant Themes "Hover" example
Create an awesome hover effect using the Blurb Module
Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Note: Download the complete layout from here.

We are going to recreate this awesome hover example:

We are going to use a two columns layout so lets first add a Normal Section and, inside that one, add a Row and set its layout to be two columns.

Adding and designing the Blurb Module

In the first column, add a Blurb Module, add your Title and Content. 

Set the Blurb Background Color

In Content Tab > Background first, activate the Hover option by hovering over the Background text. This will let you enable the Hover options:

Set a Background Color of  #890089 - or choose any other color that fits your design.

Switch to hover tab and set the opacity of 0.13. The Background color, in this case, will be rgba(137,0,137,0.13) 

Set the Blurb Background Image

In Content Tab > Background set a background image, in this example, the image used is 980x600px.

In the same section, set the Background Image Blend to Multiply.

Blurb Module's Text Design options

Switch to the Design Tab and set the Blurb Module text to be centered align:

In Design Tab > Title Text > H4 set the Title Font Weight to be Ultra Bold or Bold and the Title Text Color to be #ffffff

In Design Tab > Body Text > Body Text Color activate the Hover option and, in the Default Tab set the color to be rgba(255,255,255,0) , switch to Hover tab and set the color to #ffffff

Blurb Module Spacing Design

Custom Margin

In Design Tab > Spacing > Custom Margin first activate the Hover option. In Default Tab set the top-margin to be 0. 

Switch to Hover Tab and set the top-margin and bottom-margin to be -20px .

Custom Padding

In Design Tab > Spacing > Custom Padding first activate the Hover option. In Default Tab set the following values:

  • Top: 32%

  • Bottom: 13%

  • Left: 5%

  • Right: 5%

Switch to Hover Tab and set the following values:

  • Top : 20%

  • Bottom: 25%

  • Left: 5%

  • Right: 5%

Blurb Module's Box Shadow

In Design Tab > Box Shadow choose the 3rd Shadow option:

The Box Shadow values will be:

  • Box Shadow Horizontal Position: 0px

  • Box Shadow Vertical Position: 17px

  • Box Shadow Blur Strength: 22px

  • Box Shadow Spread Strength: -6px

Activate the Hover option for the Shadow Color and set the following values:

  • Default Value: rgba(0,0,0,0) 

  • Hover Value: rgba(0,0,0,0.41) 

That's it, now you can duplicate this Blurb Module and place it in the Second Column, change the Blurb Background color and Background Image as well as Blurb Text content.

The end result can be viewed here: https://divi.wordpress-corner.com/divi-hover-effects/

You can download the complete layout (as presented in the above demo) from here.

How to use the Layout

  1. Download the layout.

  2. Unzip the file.

  3. Create a new page.

  4. Activate Divi Builder.

  5. Use the Portability option and import the .json file (from the zip file downloaded at step 1).

Did this answer your question?