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 let's first add a Normal Section and, inside that one, add a Row and set its structure to be two columns:
Adding and designing the Blurb Module
In the first column, add the Divi Blurb Module, and add your Title and Content.
Set the Blurb Background Color
In the Blurb module > 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 the hover tab and set the opacity to 0.13. The Background color, in this case, will be
Set the Blurb Background Image
In Content Tab > Background set a background image, in this example, the image used is
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 center 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 the Hover tab, and set the color to
Blurb Module Spacing Design
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
bottom-margin to be
In Design Tab > Spacing > Custom Padding first activate the
Hover option. In Default Tab set the following values:
Switch to Hover Tab and set the following values:
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.
Hover option for the Shadow Color and set the following values:
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
Download the layout.
Unzip the file.
Create a new page.
Activate Divi Builder.
Use the Portability option and import the
.jsonfile (from the zip file downloaded at step 1).