Hover effects are a fantastic way to add interactivity and visual interest to your website.
If you've been inspired by the impressive hover effects showcased by Elegant Themes and want to implement similar effects on your own site, this article is for you.
We will guide you through the process of recreating Elegant Themes' hover effect examples step-by-step using Divi.
Note: You can download the complete layout from here.
Let's start by looking at what you are going to build with the help of this article:
Insert a Regular Section by clicking on the Add New Section icon
Inser a Row by clicking on the Add New Row icon
Choose the Two Column layout for the Row
Insert the Blurb module by clicking on the Add New module icon
in the first column and set your own Title and Content textExpand the Background option group and enable the Hover state for the Background Color option by clicking on the Pointer arrow
For Desktop State, set the background color to #890089
Click on the Hover tab and set the opacity to 0.13, or you can copy/paste this RGBA value: rgba(137,0,137,0.13)
Set a Background Image. In this article, the image size is 980x600px
Set the Background Image Blend to Multiply
Go to Design Tab → Text → Text Orientation and choose Center
Set the Blurb Title's font options as follows:
Title Font: Default
Title Font Weight: Ultra Bold
Title Text Color: White
Set the Blurb's Text font options as follows:
Body text Color:
Desktop state color: rgba(255,255,255,0)
Hover state color: #ffffff
Set the Blurb's Spacing options as follows
Maring
Desktop state: Top Margin: 0px
Hover state: Top: -20px, Bottom: 20px
Padding
Desktop state: Top: 32%, Bottom: 13%, Left: 5% and Right: 5%
Hover state: Top: 20%, Bottom: 25%
Set the Blurb's Box Shadow as follows:
Box Shadow Horizontal Position: 0px;
Box Shadow Vertical Position: 17px;
Box Shadow Blur Strength: 22px;
Box Shadow Spread Strength: -6px.
Shadow Color:
Desktop state: rgba(0,0,0,0)
Hover state: rgba(0,0,0,0.41)
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).