How to Use Section Divider Height Hover Effects to Reveal Content in Divi

Last Updated on September 16, 2022 by 10 Comments

How to Use Section Divider Height Hover Effects to Reveal Content in Divi
Blog / Divi Resources / How to Use Section Divider Height Hover Effects to Reveal Content in Divi
Play Button

Section Dividers continue to be a popular Divi design element. There are many divider styles to choose from with helpful options that make it easy to add unique transitions and backgrounds to your page.

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

Let’s get started.

Sneak Peek

section divider hover effect

Download the Section Divider Height Hover Effects for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Let’s get to the tutorial shall we?

Subscribe To Our Youtube Channel

What You Need to Get Started

To get started, you will need to have the following:

  1. The Divi Theme installed and active
  2. A new page created to build from scratch on the front end (visual builder)
  3. A few mock images to use in the design. I will be using a few images with transparent backgrounds from out 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 Row

First, let’s create a regular section with a two column row.

section divider hover effect

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

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

section divider hover effect

Adding the Section Title

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

<h2>The Juice</h2>

Then update the design 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 we will add in the next step.

Adding the Image

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

section divider hover effect

The adjust the image alignment to center.

section divider hover effect

Adding a Call to Action in Column 2

In Column 2, add a call to action module.

section divider hover effect

Add a Button Link URL to make sure the button shows.

section divider hover effect

Styling the CTA Background and Title Text

Then update the following design settings:

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

section divider hover effect

Styling the CTA Button

Update the button design as follows:

Button Text Color: #ffffff
Button Background Color: #73ba57
Button Border Width: 0px

section divider hover effect

Styling the CTA Border

Then add a border to frame the module as follows:

Border Width: 10px
Border Color: rgba(115,186,87,0.15)

section divider hover effect

Adding the Divider Height Hover Effect to Reveal the Call to Action

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

Adding the Top Divider

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

Top Divider Style: see screenshot
Top Divider Color: #73ba57
Top Divider Height: 70% (default), 0% (hover)
Top Divider Flip: horizontal

Notice the Divider Height starts with a default height of 70% and then changes to a height of 0% on hover.

Adding the Bottom Divider

Next add a similar bottom Divider to the section with the following settings.

Top Divider Style: see screenshot
Top Divider Color: #73ba57
Top Divider Height: 70% (default), 0% (hover)
Top Divider Flip: horizontal
Divider Arrangement: On Top of Section Content

This bottom divider also starts with a 70% height that changes to 0% on hover. However, since the divider arrangement option is set on top of the content, the section divider hides the bottom portion of the call to action in column 1. Then on hover, the rest of the call to action is revealed.

Check out the result so far.

section divider hover effect

Adding a Box Shadow Hover Effect for a Unique Transition and Design

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

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

section divider hover effect

Slowing Down the Transition Duration

For one last step, let’s slow down the transition duration a bit.

Transition Duration: 700ms

section divider hover effect

Final Result

Here is the final result on desktop.

section divider hover effect

If you don’t want the content to be hidden on tablet and phone display, you can easily change the Divider arrangement to “underneath section content” for those devices.

section divider hover effect

Here is the final design on tablet and phone.

section divider hover effect

section divider hover effect

Experimenting with Other Section Divider Styles for Completely Unique Designs in Seconds

With this setup in place, you can easily experiment with different divider styles and combinations!

section divider hover effect

Here are a few more that I’ve included in the free download.

section divider hover effect

section divider hover effect

section divider hover effect

Final Thoughts

Hopefully, this post has given you a little inspiration for how to create some unique section divider height hover effects to reveal content. In fact, adjusting the divider height on hover can be a great design element by itself. And, the design examples should help you jumpstart your own exploration and designs.

I look forward to hearing from you in the comments.

Cheers!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

10 Comments

  1. Great! Thank you for json file!

  2. Now it is the right one thank you

  3. now it is the right one thx

  4. Thank you for this cool effect.
    Imagination seems to be the limit…

  5. Nissim is right. Nice, but not the files in the article.

    • So this is a “tap” to reveal on mobile? Probably not the best user experience hiding content in my opinion.

  6. The downloaded files showing something else other then what it is showing here

    • Sorry about that. Not sure what happened. I updated the download file. Should be the correct one now.

  7. How does this work on mobile with no onhover ?
    So many of these design ideas are beautiful but not responsive. What about mobile first design?

  8. yes it’s very cool 🙂

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today