Elegant Themes

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 <a href="https://gist.github.com/eduard-ungureanu/46f30862af45dc0cc3f9688efa893b2e/archive/959dd40de6de424cb0a39fce6c8f0fe0273e1e80.zip" rel="nofollow noopener noreferrer" target="_blank">here</a>.

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 <img src="https://downloads.intercomcdn.com/i/o/1076832737/7b1a77b4854f27c9e0f072a5/add-section-icon.png" width="28" alt="">

Inser a Row by clicking on the Add New Row icon <img src="https://downloads.intercomcdn.com/i/o/1076833245/efae37aed3308e20233769a7/add-row-icon.png" width="30" alt="">

Choose the Two Column layout for the Row

Insert the Blurb module by clicking on the Add New module icon <img src="https://downloads.intercomcdn.com/i/o/1076836164/8b4d612ee30ff45ba8510d0b/add-new-module-icon.png" width="28" alt=""> in the first column and set your own Title and Content text

Expand the Background option group and enable the Hover state for the Background Color option by clicking on the Pointer arrow <img src="https://downloads.intercomcdn.com/i/o/1076842880/9b16640896f4525413953176/hover-icon.png" width="22" alt="">

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:

1. Title Font: Default
2. Title Font Weight: Ultra Bold
3. Title Text Color: White
    

Set the Blurb's Text font options as follows:

1. Body text Color:
 1. Desktop state color: rgba(255,255,255,0)
 2. Hover state color: #ffffff

Set the Blurb's Spacing options as follows

1. Maring
   1. Desktop state: Top Margin: 0px
   2. Hover state: Top: -20px, Bottom: 20px
       
      
       
2. Padding
   1. Desktop state: Top: 32%, Bottom: 13%, Left: 5% and Right: 5%
       
   
   2. Hover state: Top: 20%, Bottom: 25%
       


Set the Blurb's Box Shadow as follows:

1. Box Shadow Horizontal Position: 0px;
2. Box Shadow Vertical Position: 17px;
3. Box Shadow Blur Strength: 22px;
4. Box Shadow Spread Strength: -6px.
5. Shadow Color:
 1. Desktop state: rgba(0,0,0,0) 
 2. Hover state: rgba(0,0,0,0.41)

1. Insert a Regular Section by clicking on the Add New Section icon <img src="https://downloads.intercomcdn.com/i/o/1076832737/7b1a77b4854f27c9e0f072a5/add-section-icon.png" width="28" alt="">
2. Inser a Row by clicking on the Add New Row icon <img src="https://downloads.intercomcdn.com/i/o/1076833245/efae37aed3308e20233769a7/add-row-icon.png" width="30" alt="">
3. Choose the Two Column layout for the Row
 

4. Insert the Blurb module by clicking on the Add New module icon <img src="https://downloads.intercomcdn.com/i/o/1076836164/8b4d612ee30ff45ba8510d0b/add-new-module-icon.png" width="28" alt=""> in the first column and set your own Title and Content text
5. Expand the Background option group and enable the Hover state for the Background Color option by clicking on the Pointer arrow <img src="https://downloads.intercomcdn.com/i/o/1076842880/9b16640896f4525413953176/hover-icon.png" width="22" alt="">
 
 
 
6. For Desktop State, set the background color to #890089
7. 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)
8. Set a Background Image. In this article, the image size is 980x600px
9. Set the Background Image Blend to Multiply
 
 
 
10. Go to Design Tab → Text → Text Orientation and choose Center

11. Set the Blurb Title's font options as follows:
 1. Title Font: Default
 2. Title Font Weight: Ultra Bold
 3. Title Text Color: White
 
 
 
12. Set the Blurb's Text font options as follows:
 1. Body text Color:
 1. Desktop state color: rgba(255,255,255,0)
 2. Hover state color: #ffffff
13. Set the Blurb's Spacing options as follows
 1. Maring
 1. Desktop state: Top Margin: 0px
 2. Hover state: Top: -20px, Bottom: 20px
 
 
 
 2. Padding
 1. Desktop state: Top: 32%, Bottom: 13%, Left: 5% and Right: 5%
 
 
 2. Hover state: Top: 20%, Bottom: 25%
 

14. Set the Blurb's Box Shadow as follows:
 1. Box Shadow Horizontal Position: 0px;
 2. Box Shadow Vertical Position: 17px;
 3. Box Shadow Blur Strength: 22px;
 4. Box Shadow Spread Strength: -6px.
 5. Shadow Color:
 1. Desktop state: rgba(0,0,0,0) 
 2. Hover state: rgba(0,0,0,0.41)

You can download the complete layout (as presented in the above demo) from <a href="https://gist.github.com/eduard-ungureanu/46f30862af45dc0cc3f9688efa893b2e/archive/959dd40de6de424cb0a39fce6c8f0fe0273e1e80.zip" rel="nofollow noopener noreferrer" target="_blank">here</a>.

Use the <a href="https://www.elegantthemes.com/documentation/divi/library-import/" rel="nofollow noopener noreferrer" target="_blank">Portability option</a> and import the <code>.json</code> file (from the zip file downloaded at step 1).

1. Download the layout.
2. Unzip the file.
3. Create a new page.
4. Activate Divi Builder.
5. Use the <a href="https://www.elegantthemes.com/documentation/divi/library-import/" rel="nofollow noopener noreferrer" target="_blank">Portability option</a> and import the <code>.json</code> file (from the zip file downloaded at step 1).

Learn how to apply stylish transitions, animations, and effects to recreate the Elegant Themes Hover Effect example displayed on our site.

How to use the Layout