How to use hover effects to reveal content in Divi

7 Min Read
Hover effects divi

Hover effects divi continue to be a popular design element on Divi. There are many styles of separators out there including some useful options that make it easy to add unique transitions and backgrounds to your page.

In this tutorial, we’re going to use Hover effects divi a little differently. Divi allows you to adjust the height and arrangement of each divider. This allows us to position the separators above certain areas or certain contents of the section. By using the hover option for the height of the divider, we can add unique hover effects revealing partially hidden content. This works great for drawing attention to a call to action or a particular button that you want visitors to click.

Hover effects divi

What you need to get started Hover effects divi

To get started, you need to have the following:

  1. The Divi theme installed and active
  2. A new page was created to build from scratch on the front-end (visual builder)
  3. Some dummy images to use in the design. I’ll be using some images with transparent backgrounds.

After that, you are ready to start!

Implementing the section divider height hover effect design in Divi

Creation of the section and the line

Let’s start by creating a regular section with a row of two columns.

Before adding a module, open the section settings and update the following:

  • Background Gradient Left: # 73ba57
  • Background Gradient Right: # 2a4c23
  • Width: 80%
  • Max Width: 1080px
  • Section Alignment: Center

But you can also choose the color scheme you like according to your image. my color scheme is: # fff200 – # e09900 in gradient.

Added section title To add the section title, create a text module and update the body content with the following h2 header:

Then update the drawing as follows:

Heading 2 Font: Lato
Heading 2 Text size: 80px
Heading 2 Letter spacing: -5px
Margin: -50px top, -40px bottom
Z-index: -1

The custom margin and the z index will allow the text to sit behind the image that we will add in the next step.

Add image

Under the text module with the title in column 1, add an image module. Then upload an image with a transparent background. I am using an image from the Juice Shop Layout Pack that is 240 pixels by 300 pixels.

Adjust the alignment of the image to the center.

Adding a call to action in column 2

In column 2, add a call to the action module.

Add a button link URL to make sure the button is displayed.

CTA background and title style

Then update the following design parameters:

  • Background color: #ffffff
  • Text color: title
  • Font: Lato
  • Title Weight font: Heavy
  • Title Font style: TT title
  • Text size: 18px

Styling the CTA button

Update the button design as follows:

Button text color: #ffffff
Button background color: # e09900
Button border width: 0 px

Styling the CTA border

Then add a border to frame the module as follows:

Border Width: 10px
Border Color: rgba (224,145,0,0.25)

Added divider height hover effect to reveal the call to action

Now it’s time to add the section division height hover effect to reveal the call to action. To do this, we first need to create our section dividers.

Adding the top divider

Open the section settings and the top separator with the following settings.

Top divider style: see screenshot
Top divider color: # 73ba57
Top divider height: 70% (default), 0% (hovered)
Top divider flip: horizontal

Notice that the height of the separator starts with a default height of 70%, and then changes to a height of 0% on hover.

Adding the lower divider

Then add a bottom separator similar to the section with the following parameters.

Top divider style: see screenshot
Top divider color: # 73ba57
Top divider height: 70% (default), 0% (hovered)
Top divider flip : horizontal
Divider Layout: At the top of the Content section

This background separator also starts with a height of 70% which changes to 0% on hover. However, because the separator layout option is set at the top of the content, the section separator hides the bottom part of the call to action in column 1. Then, on hover, the rest of the l call to action is revealed.

Read more: How to use the Divi WordPress theme toolbox plugin

Added a box-shadow hover effect for a unique transition and design

For a unique hovering transition and design, we can add a box shadow hover effect that will take place simultaneously with the divider height hover effect. To do this, add the shadow of the following box to the section.

Box Shadow: see screenshot
Box Shadow Horizontal position: 0px
Box Shadow Vertical position: 0px
Box Shadow Spread Force: 0px (default), 150px (hover)
Box Shadow Color: # 73ba57

Slow down the duration of the transition

For a final step, let’s slow down the duration of the transition a bit.

Transition duration: 700ms

Final thoughts

Hope this tutorial gave you some inspiration to create unique section divider height hover effects to reveal content. Adjusting the height of the hover divider can be a remarkable design element. And the design samples should help you start your exploration and your designs.


For website maintenance service contact us.

Posted by Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it
Leave a comment

Leave a Reply