Skip to Main Content

How to use rollover effects to reveal content in Divi

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Section dividers 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'll be using section dividers 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. Using the hover option for the divider height, 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.

Let's start.

Sample result

Animation content revealed diviWhat you need to get started

To get started, you need the following:

  1. Divi theme installed and active
  2. A new page created to build from scratch on the front-end (visual constructor)
  3. Some dummy images to use in the design. I'm going to use some images with transparent backgrounds from the Juice Shop Layout Pack .

After that, you are ready to start!

Implementing the section divider height hover effect design in Divi

Creating the section and the line

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

Choose a divi layoutBefore adding a module, open the section settings and update the following:

Left background gradient: #73ba57
Right background gradient: #2a4c23
Width: 80%
Maximum 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.

Add a degraded divi background

Add section title

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

The Juice

Then update the drawing as follows:

Heading 2 Font: Lato
Heading 2 Text Size: 80px
Heading 2 Letter spacing: -5px
Margin: -50px at the top, -40px at the bottom
Z-Index: -1

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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.

Divi fruit juiceAdjust the alignment of the image to the center.

Divi center alignment

Adding a call to action in column 2

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

Call for action on column 2

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

Add a divi action call link

CTA background and title style

Then update the following design parameters:

Background color: #ffffff
Text color:
title Font: Lato
Title Weight Policy: Heavy
Title Font Style: TT
title Text Size: 18px

Customize divi call to action

Stylize the CTA button

Update the button design as follows:

Button text color: #ffffff
Button Background Color: # e09900
Button Border Width: 0 px

Customize iamge divi background

Styling the CTA border

Then add a border to frame the module as follows:

Width of the border: 10px
Color of border: rgba (224,145,0,0.25)

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Custom border divi

Added divider height hover effect to reveal 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 upper separator

Open the section parameters and the upper separator with the following parameters.

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

Note that the height of the separator begins with a default height of 70%, and then moves to a height of 0% on rollover.

Addition of the lower divider

Then add a lower 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)
Flip top divider: horizontal
Divider Disposition: 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 lower part of the call to action in column 1. Then, on hover, the rest of the l call to action is revealed.

Check out the result so far.

Customize divi borders

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

Divi border animation

Slow down the duration of the transition

For a last step, let's slow down the duration of the transition.

Duration of the transition: 700ms

Configure divi transitionsFinal result

Here is the final result on the desktop.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Divi final result

Based on what we have done above, you will be able to customize the display on mobile and tablet.

Latest Thoughts

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

Hope to hear from you in the comments.

Cheers !

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
6 shares
Share6
tweet
Save