How to Make Hidden Row Content Appear on Hover with Divi (Free Download!)

Posted on February 6, 2019 by in Divi Resources | 17 comments

How to Make Hidden Row Content Appear on Hover with Divi (Free Download!)

Adding subtle interactions to your website can really boost the overall user experience visitors have. One of the things that’ll make your website look that more fancier, while still respecting user-friendliness, is making row content appear on hover. This is a great approach for showcasing services, products, features and more.

In this tutorial, we’ll show you how to create a specific design from A to Z, but once you get the approach, you can make it work for any kind of website you’re working on. At the end of this blog post, we’ll also share the JSON file of this design that you can download for FREE and use without any restrictions.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

hidden row content

Mobile

hidden row content

Let’s Start Creating!

Add New Section

Default Background Color

Start off by adding a new section to a new or existing page and change the section background color.

  • Background Color: #e0e0e0

hidden row content

Hover Background Color

Modify this background color on hover.

  • Background Color: #000000

hidden row content

Spacing

Move on to the design tab and add some custom spacing values. To make this tutorial work, we’ll only use viewport units. This will help assure that everything stays in place, no matter the screen size.

  • Top Margin: 5vw
  • Bottom Margin: 5vw
  • Left Margin: 3vw
  • Right Margin: 3vw
  • Top Padding: 0px
  • Bottom Padding: 0px

hidden row content

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

hidden row content

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background.

  • Color 1: #ff5b79
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 15%
  • End Position: 15%

hidden row content

Sizing

Make some changes to the sizing settings of the row as well.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

hidden row content

Spacing

And add some custom padding values in the spacing settings.

  • Top Padding: 9vw
  • Bottom Padding: 9vw
  • Column 1 Left Padding: 5vw
  • Column 1 Right Padding: 5vw
  • Column 2 Left Padding: 5vw
  • Column 2 Right Padding: 5vw

hidden row content

Add Text Module to Column 1

Add Content

Time to start adding the modules! The first module we’ll need is a Text Module in column 1. Add H3 content and a link.

hidden row content

Link Text Settings

Then, go to the link text settings and make some changes to the appearance of the link.

  • Link Font: Didact Gothic
  • Link Font Style: Underline
  • Link Underline Style: Solid
  • Link Text Color: #ffffff
  • Link Text Size: 20px

hidden row content

Heading Text Settings

Modify the H3 text settings as well.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 50px

hidden row content

Visibility

Last but not least, disable the module on desktop. We only need this module to show up on smaller screen sizes.

hidden row content

Add Divider Module to Column 2

Visibility

The second and last module needed in column 1 is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

hidden row content

Color

Then, change the divider color.

  • Color: #ffffff

hidden row content

Spacing

Add some custom margin values to the Divider Module as well.

  • Top Margin: 11vw (Desktop), 80px (Tablet),
  • Bottom Margin: 50px (Tablet & Phone)

hidden row content

Add Text Module #1 to Column 2

Add Content

On to the second column! Add a Text Module with some H4 content of choice.

hidden row content

Heading Text Settings

Then, go to the H4 text settings and make some changes.

  • Heading 4 Font: Didact Gothic
  • Heading 4 Font Weight: Bold
  • Heading 4 Text Color: #ffffff
  • Heading 4 Text Size: 2vw (Desktop), 40px (Tablet), 30px (Phone)

hidden row content

Add Text Module #2 to Column 2

Add Content

Right below the previous Text Module, go ahead and add another one with some paragraph content of choice.

hidden row content

Text Settings

Go to the text settings next and make some changes.

  • Text Font: Didact Gothic
  • Text Color: #ffffff
  • Text Size: 0.9vw (Desktop), 18px (Tablet & Phone)
  • Text Line Height: 2em

hidden row content

Spacing

Add some custom margin values too.

  • Top Margin: 2vw
  • Right Margin: 15vw

hidden row content

Add Row #2

Column Structure

Once you’re done modifying the first row and all of its modules, you can go ahead and add a new row using the following column structure:

hidden row content

Sizing

Without adding any modules yet, open the row settings and make some changes to the Sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

hidden row content

Spacing

Remove all default padding in the row spacing settings as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

hidden row content

Visibility

Last but not least, hide this row on tablet and phone.

hidden row content

Add Text Module to Column

Add Content

The only module we need in this row is a Text Module. Add some H3 content and a link.

hidden row content

Default Background Color

Then, go to the background settings and add a background color to the Text Module.

  • Background Color: #e0e0e0

hidden row content

Hover Background Color

Modify this background color on hover.

  • Background Color: rgba(255,255,255,0)

hidden row content

Default Text Settings

Next, go to the text settings and make some changes.

  • Link Font: Didact Gothic
  • Link Font Style: Underline
  • Link Underline Style: Solid
  • Link Text Color: #ffffff
  • Link Text Size: 0px
  • Link Letter Spacing: -1px

hidden row content

Hover Link Text Settings

Modify the link text size on hover as well.

  • Link Text Size: 1.7vw

hidden row content

Default Heading Text Settings

Continue by making some changes to the H3 text settings.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Color: #000000
  • Heading 3 Text Size: 12vw
  • Heading 3 Letter Spacing: -0.8vw

hidden row content

Hover Heading Text Settings

Modify some of the H3 text settings on hover.

  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 4vw
  • Heading 3 Letter Spacing: -0.2vw

hidden row content

Spacing

Then, go to the spacing settings and add some custom margin and padding values.

  • Top Margin: -34.3vw
  • Bottom Margin: -5vw
  • Top Padding: 10vw
  • Bottom Padding: 10vw
  • Left Padding: 26.5vw

hidden row content

Hover Spacing

Modify the spacing values on hover.

  • Top Margin: -34.1vw
  • Bottom Margin: -5vw
  • Top Padding: 12vw
  • Bottom Padding: 12vw
  • Left Padding: 11.5vw

hidden row content

Transitions

Increase the transition duration of the Text Module as well.

  • Transition Duration: 400ms

hidden row content

Clone Section

Once your first section is completed, go ahead and clone the entire section up to as many times as you want. In the next part of the tutorial, we’ll show you the changes you need to make to each duplicate.

 

row appear on hover

Change Section Hover Background Color

The first thing you’ll need to modify is the section hover background color.

  • Background Color: #ff5b79

row appear on hover

Change Row #1 Gradient Background

Change the row #1 gradient background as well.

  • Color 1: #000000

row appear on hover

Change Text Color & Copy

Along with the text color and all the copy.

  • Heading 3 Text Color: #ff5b79

row appear on hover

Change Text Module Spacing

Last but not least, change the left padding of the Text Module in row #2. The amount of left padding you’ll need to use depends on the length of the content you’re using.

  • Left Padding: 21vw

row appear on hover

Download The Layout for FREE

To lay your hands on the layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list 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.

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome on different screen sizes.

Desktop

hidden row content

Mobile

hidden row content

Final Thoughts

In this post, we’ve shown you how to reveal hidden row content on hover. The outcome we’ve created is made using Divi’s built-in options only. We’ve also shared the JSON file at the end of the tutorial which will hopefully help you create your own alternative designs as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

17 Comments

  1. Excellent tutorial, thanks!

  2. So helpfull….make my life easier!! 🙂

  3. Nice work Donjete …this is a very cool use of Divi’s hover styles! Seems to me that you would not want any hover affect on mobile though. Unless I’m missing something, what’s the purpose?

    • Nice work, Donjete!

      I agree, hover effects don’t make any sense with mobile. I find myself relying less and less on them when I design. However, the desktop reveal is really nice.

    • Funny, that was my first thought too. Who has a mouse pointer on mobile? Seems like the tutorial on “flipping cards” is more appropriate for mobile. And a great potential space saver for the end user scrolling thru a mobile page. I haven’t tried it yet but I really need to find a way to create a small module that opens a section of modules if the end user touches “tap for more” or something. Any suggestions on this? Have they done this tutorial and I missed it. What I don’t want is the accordion where adding modules inside is a nightmare task. I’d prefer that a button opens a section that I can build however I want. You seem like someone in the know; that’s why I’m asking.

  4. Still a very good tutorial, thank you

  5. OK, so the grumpy old man says…

    I LOVE IT!

    This is: Excellent, useful, downloadable, practical, and more! We need more of these kinds of things. Can’t thank you enough. And…NO PLUGIN REQUIRED!

  6. I add that it is certainly a good idea downloading the file, thank you

  7. Can this be done for columns?

  8. Great effect. If I may suggest something about the tutorial : you spend a lot of content giving us the exact value of each setting, which is great but we can just find them when we download the layout.
    Instead, it would be great that you give some “theoretical” content. Like :
    – this effect is allowed by a negative margin of row 2 and on hover, heading text get smaller and background color gets transparent and let row 1 appear (silly but I spent time to figure it out)
    – also, how can we quickly calculate the good amount of spacing in vw to get everything “fitting” all right
    My 2 cents, but thanks for this inspiring article

  9. It´s a wonderful tutorial – thank you! I am just a bit concerned about SEO as Google does not like hidden text. What do you think?

    • As far as I can tell, the text isn’t hidden from Google. What they’ve done is created a row with the body text and titles inside which Google can ‘see’, then they’ve created another row (that is only visible on desktop) that covers the first row. When you hover over the second row it becomes transparent, revealing the first row below.

  10. Very instructive and interesting post thanks

  11. Love your tutorials, but it would be great if you could skip the tedious text formatting and focus on the functionality in these videos. I feel like I’ve spent hours watching you format text. Not that you’re not a pleasant guy. 🙂

    • I fully agree with this.

  12. Thank you for the guide. I was struggling with this but didn’t have to go much into searching as found this amazing guide on the first page itself. But I am concerned about the SEO as Google doesn’t like hidden text. What are your views on this?

  13. Hi when I hover in firefox it jumps like crazy if you hold the cursor on it, have I done something wrong? If so do you know a fix?
    Thanks, really helpful tutorial

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

554,210 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest