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 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 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 #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
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).