Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Recreate Elegant Themes Hover Effect Example
How to Recreate Elegant Themes Hover Effect Example

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

Updated over 3 months ago

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:

  1. Insert a Regular Section by clicking on the Add New Section icon

  2. Inser a Row by clicking on the Add New Row icon

  3. Choose the Two Column layout for the Row

  4. Insert the Blurb module by clicking on the Add New module icon 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

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

Related Articles
How to Add Zoom-In Hover Effect to the Image Module
How to Import and Export Theme Builder Templates
How to Create a Fixed Navigation that Sticks to the Top When the Page is Scrolled Down
Using Divi Hover Options
Divi Dash Websites Tab
Did this answer your question?