Looking for a creative way to add descriptions to images? With Divi’s built-in hover options, it’s now easier than ever. You can use this approach for various purposes on your website, from testimonials to team member descriptions and more. In this tutorial, we’ll go over 4 different examples that’ll help you achieve stunning web design. We’re creating all four examples using Divi’s built-in options only.

Let’s get to it!

Preview

Before we dive into the step-by-step tutorial, let’s take a quick look at the end result on different screen sizes.

Desktop

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Mobile

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-1 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

General Steps

Add New Section

To make this tutorial easier to follow, we’ll start with some general steps. Afterwards, we’ll handle the steps that are unique to each one of the examples. Start by adding a new regular section to a new or existing page.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Add Row

Column Structure

Go ahead and choose the following column structure (you can make this work with other column structures too):

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-1 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Column 1 Background Image

Without adding any modules yet, open the row settings and add a background image to the first column.

  • Column 1 Background Image Repeat: No Repeat

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-2 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Sizing

Continue by changing the sizing settings of the row.

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-3 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Spacing

And add some custom padding values next.

  • Top Padding: 150px
  • Bottom Padding: 150px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-4 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Add Text Module to Column 1

Add Content

To show the description on hover, we’ll be using a Text Module for each one of the four examples. Go ahead and add this Text Module to the same column you’ve added a background image to.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-5 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Text Settings

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

  • Text Color: rgba(255,255,255,0)
  • Text Size: 0.7vw (Desktop), 12px (Tablet & Phone)
  • Text Orientation: Justify

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-6 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Text Settings

Change the text color on hover.

  • Text Color: #000000

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-7 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Heading Text Settings

Change the H3 text settings as well.

  • Heading 3 Font Weight: Ultra Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Color: rgba(255,255,255,0)
  • Heading 3 Text Size: 2.5vw (Desktop), 40px (Tablet), 30px (Phone)
  • Heading 3 Line Height: 2.2em

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-8 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Heading Text Settings

And apply a different H3 text color on hover.

  • Heading 3 Text Color: #000000

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-9 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Clone Row 3 Times

Now that we’ve gone through all the general steps, we can go ahead and clone the row we’ve created three times which will allow us to have one row for each one of the four examples. Make sure that at the beginning of each example, you move on to the next row.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-10 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Example #1

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-2 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Module

Default Background Color

Let’s get started with the first example! Open the Text Module in the first column and add a background color.

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-11 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Background Color

Change this background color on hover.

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-12 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Spacing

Add some custom margin and padding next.

  • Top Margin: -500px
  • Bottom Margin: 500px
  • Top Padding: 250px
  • Bottom Padding: 250px
  • Left Padding: 70px
  • Right Padding: 70px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-13 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Spacing

Change the values on hover.

  • Top Margin: 0px
  • Bottom Margin: 0px
  • Top Padding: 100px
  • Bottom Padding: 100px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-14 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Transitions

Lastly, create a smooth transition by increasing the transition duration in the advanced tab.

  • Transition Duration: 1000ms

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-15 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Example #2

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-3 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Module

Default Background Color

On to the next example! Open the Text Module in the first column and add a background color.

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-16 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Background Color

Change the background color on hover.

  • Background Color: rgba(226,246,255,0.85)

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-17 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Spacing

Add some custom margin and padding values next.

  • Top Margin: 100px
  • Bottom Margin: 100px
  • Top Padding: 150px
  • Bottom Padding: 150px
  • Left Padding: 70px
  • Right Padding: 70px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-18 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Spacing

Change these values on hover.

  • Top Margin: 200px
  • Bottom Margin: -200px
  • Left Margin: 50px
  • Top Padding: 100px
  • Bottom Padding: 100px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-19 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Border

Continue by adding a border to the Text Module.

  • Left Border Width: 0px
  • Left Border Color: #ffffff

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-20 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Border

And change the border width on hover.

  • Left Border Width: 8px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-21 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Transitions

Last but not least, increase the transition duration for a smooth transition.

  • Transition Duration: 500ms

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-22 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Example #3

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-4 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Clone Text Module

On to the third example! For this example, we’ll need to create a separate version for smaller screen sizes. Clone the Text Module in the first column.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Add Column 1 Gradient Background

Then, open the row settings and add a gradient background to the first column using the following settings:

  • Color 1: rgba(43,135,218,0)
  • Color 2: #ffffff
  • Column 1 Gradient Type: Radial
  • Column 1 Radial Direction: Center
  • Column 1 Start Position: 59%
  • Column 1 End Position: 59%
  • Column 1 Place Gradient Above Background Image: Yes

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-23 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Module #1

Gradient Background

Open the first Text Module in column 1. This will be the description that appears on desktop. Add a gradient background.

  • Color 1: rgba(239,239,239,0.65)
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 70%
  • End Position: 71%

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-24 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Spacing

Then, add some custom margin and padding values.

  • Top Margin: 6vw
  • Bottom Margin: 6vw
  • Top Padding: 9vw
  • Bottom Padding: 9vw
  • Left Padding: 2vw
  • Right Padding: 2vw

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-25 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Spacing

Change the margin values on hover.

  • Left Margin: 15vw
  • Right Margin: -15vw

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-26 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Visibility

And disable the module on tablet and phone.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-27 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Transitions

Increase the transition duration as well.

  • Transition Duration: 500ms

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-28 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Module #2

Gradient Background

The second module in column 1 is the description that’ll appear on smaller screen sizes. Start by adding a gradient background.

  • Color 1: rgba(239,239,239,0.65)
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 70%
  • End Position: 71%

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-29 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Spacing

Add some custom margin and padding values next.

  • Top Margin: 95px
  • Bottom Margin: 95px
  • Top Padding: 170px
  • Bottom Padding: 170px
  • Left Padding: 20px
  • Right Padding: 20px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-30 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Spacing

Change the margin values on hover.

  • Top Margin: 250px
  • Bottom Margin: -200px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-31 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Visibility

And disable the module on desktop.

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-32 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Orientation of Both Text Modules

Last but not least, make sure you change the text orientation of both modules as well to achieve the desired outcome.

  • Text Orientation: Center

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-33 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Example #4

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-5 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Change Text Module

Default Background Color

On to the fourth and last example! Add the following background color to the Text Module in column 1:

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-34 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Background Color

Change this background color on hover.

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

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-35 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Default Spacing

Go to the spacing settings next and add some custom margin and padding values there.

  • Left Margin: -200px
  • Right Margin: 200px
  • Top Padding: 250px
  • Bottom Padding: 250px
  • Left Padding: 70px
  • Right Padding: 70px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-36 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Hover Spacing

Modify these values on hover.

  • Left Margin: 0px
  • Right Margin: 0px
  • Top Padding: 300px
  • Bottom Padding: 300px

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-37 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Transitions

Last but not least, increase the transition duration for a smooth transition.

  • Transition Duration: 1200ms

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-38 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Preview

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

Desktop

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Mobile

transforming-text-modules-into-unique-person-descriptions-on-hover-with-divi-1 Transforming Text Modules into Unique Person Descriptions on Hover with Divi

Final Thoughts

In this post, we’ve shown you how you can creatively use Divi’s hover options to showcase person descriptions on hover. With these four examples, you are ready to transform any testimonial or team member description into an interactive design element on your page. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

SEO News and More

SEO News and More