It’s no secret that about pages are great to create click-throughs on your website. It’s also that one kind of page that’ll emphasize the human part of the company behind the website. Knowing this makes us aware that it’s important we pay attention to the way we structure about pages, what kind of information we share and how we create interactions. One of the things you can do to elevate the about page experience is providing a team members section that puts your employees in the spotlight. On top of that, you can add a bio hover effect to team member photos using Divi’s built-in options only. This will allow you to save space on the page you’re working on and create a hover interaction between you and your visitors.

In this tutorial, we’ll show you step by step how to get there. Once you get the approach, you’ll be able to customize the design style to your own needs.

Let’s get to it!

Preview

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

Desktop

how-to-add-a-hover-effect-to-team-member-bios-in-divi How To Add A Hover Effect To Team Member Bios In Divi

Mobile

how-to-add-a-hover-effect-to-team-member-bios-in-divi-1 How To Add A Hover Effect To Team Member Bios In Divi

Let’s Start Recreating

Add New Section

Spacing

Create a new page or open an existing one and add a new section using the following custom padding values:

  • Top Padding: 100px
  • Bottom Padding: 100px

how-to-add-a-hover-effect-to-team-member-bios-in-divi How To Add A Hover Effect To Team Member Bios In Divi

Add Row #1

Column Structure

Once you’re done adding the custom padding to your section, you can close the section settings and add a new row using one column only.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-1 How To Add A Hover Effect To Team Member Bios In Divi

Add Text Module

Add H2 Content

Add a title Text Module to the column with some H2 copy of choice.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-2 How To Add A Hover Effect To Team Member Bios In Divi

H2 Text Settings

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

  • Heading 2 Font: Cinzel
  • Heading 2 Font Style: Small Caps
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Size: 70px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-3 How To Add A Hover Effect To Team Member Bios In Divi

Add Divider Module

Visibility

Continue by adding a new Divider Module right below the title Text Module.

  • Show Divider: Yes

how-to-add-a-hover-effect-to-team-member-bios-in-divi-4 How To Add A Hover Effect To Team Member Bios In Divi

Divider Color

Go to the design tab, open the color settings and change the color of your divider accordingly:

  • Divider Color: #333333

how-to-add-a-hover-effect-to-team-member-bios-in-divi-5 How To Add A Hover Effect To Team Member Bios In Divi

Sizing

Next, we’ll decrease the size of the divider and center it.

  • Width: 26%
  • Module Alignment: Center

how-to-add-a-hover-effect-to-team-member-bios-in-divi-6 How To Add A Hover Effect To Team Member Bios In Divi

Add Row #2

Column Structure

Right below the previous row you’ve added, go ahead and add a new row using three equally-sized columns.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-7 How To Add A Hover Effect To Team Member Bios In Divi

Sizing

Without adding any modules yet, open the row settings and make some adjustments to the sizing settings.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 2000px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

how-to-add-a-hover-effect-to-team-member-bios-in-divi-8 How To Add A Hover Effect To Team Member Bios In Divi

Spacing

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

  • Top Margin: 50px
  • Bottom Margin: 50px
  • Top Padding: 10px
  • Bottom Padding: 10px
  • Left Padding: 5px
  • Right Padding: 5px
  • Column 1, 2 & 3 Left Padding: 5px
  • Column 1, 2 & 3 Right Padding: 5px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-9 How To Add A Hover Effect To Team Member Bios In Divi

Box Shadow

We’re also giving our row a bit of depth by adding a box shadow to it with the following settings:

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -14px
  • Shadow Color: rgba(0,0,0,0.3)

how-to-add-a-hover-effect-to-team-member-bios-in-divi-10 How To Add A Hover Effect To Team Member Bios In Divi

Add Image Module to Column 1

Upload Image to Image Module

Time to start adding modules! To achieve the bio hover effect, we’ll need two modules in total; an Image Module and a Blurb Module. The Image Module will hold the image of the team member you want to showcase. The Blurb Module, on the other hand, will be used to add the icon to the left bottom corner and the bio on hover. Add an Image Module to the first column using a square-sized image.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-11 How To Add A Hover Effect To Team Member Bios In Divi

Filters

The design we’re creating is entirely grayscale. To add this grayscale to our image, go to the filters settings and remove all the saturation.

  • Saturation: 0%

how-to-add-a-hover-effect-to-team-member-bios-in-divi-12 How To Add A Hover Effect To Team Member Bios In Divi

Add Blurb Module to Column 1

Add Content

Continue by adding a new Blurb Module right below the Image Module in column 1. Add the team member’s name to the title field and enter some more info about the team member in the content box.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-13 How To Add A Hover Effect To Team Member Bios In Divi

Choose Icon

The next thing we’ll do is choose an icon of choice that’ll show visitors that there’s more to it than just a picture.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-14 How To Add A Hover Effect To Team Member Bios In Divi

Default Background Color

Then, we’ll choose an entire transparent background color.

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

how-to-add-a-hover-effect-to-team-member-bios-in-divi-15 How To Add A Hover Effect To Team Member Bios In Divi

Hover Background Color

And we’ll change that color on hover.

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

how-to-add-a-hover-effect-to-team-member-bios-in-divi-16 How To Add A Hover Effect To Team Member Bios In Divi

Default Icon Settings

We want a noticeable icon that will help visitors understand they can hover it. Change the icon settings to achieve an icon like that.

  • Icon Color: #ffffff
  • Circle Icon: Yes
  • Circle Color: #000000
  • Icon Placement: Left
  • Use Icon Font Size: Yes
  • Icon Font Size: 50px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-17 How To Add A Hover Effect To Team Member Bios In Divi

Hover Icon Settings

However, we don’t want the icon to appear on hover. That’s why we’ll use a completely transparent color instead.

  • Icon Color: rgba(255,255,255,0)
  • Circle Color: rgba(255,255,255,0)

how-to-add-a-hover-effect-to-team-member-bios-in-divi-18 How To Add A Hover Effect To Team Member Bios In Divi

Default Title Text Settings

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

  • Title Font: Cinzel
  • Title Font Weight: Bold
  • Title Font Style: Small Caps
  • Title Text Color: #000000
  • Title Text Size: 0px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-19 How To Add A Hover Effect To Team Member Bios In Divi

Hover Title Text Settings

Modify the text size on hover.

  • Title Text Size: 30px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-20 How To Add A Hover Effect To Team Member Bios In Divi

Default Body Text Settings

Modify the body text settings as well.

  • Body Font: Open Sans
  • Body Text Color: #000000
  • Body Text Size: 0px
  • Body Line Height: 1.8em

how-to-add-a-hover-effect-to-team-member-bios-in-divi-21 How To Add A Hover Effect To Team Member Bios In Divi

Hover Body Text Settings

And, again, change the body text size on hover.

  • Body Text Size: 14px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-22 How To Add A Hover Effect To Team Member Bios In Divi

Default Spacing

Last but not least, we’ll need to create an overlap between the Blurb Module and Image Module using negative top margin.

  • Top Margin: -3.7vw (Desktop), -9vw (Tablet & Phone)
  • Bottom Margin: 1.5vw (Tablet), 2vw (Phone)

how-to-add-a-hover-effect-to-team-member-bios-in-divi-23 How To Add A Hover Effect To Team Member Bios In Divi

Hover Spacing

Change the custom margin and padding values on hover.

  • Top Margin: -11.38vw
  • Top Padding: 20px
  • Bottom Padding: 20px
  • Right Padding: 50px

how-to-add-a-hover-effect-to-team-member-bios-in-divi-24 How To Add A Hover Effect To Team Member Bios In Divi

Clone Both Modules Twice & Place Duplicates in Remaining Columns

We’re done creating our first bio hover effect. To save time, we can simply clone both modules in column 1 twice and place the duplicates in the two remaining columns.

how-to-add-a-hover-effect-to-team-member-bios-in-divi-25 How To Add A Hover Effect To Team Member Bios In Divi

Change Image &  Content of Blurb Module

Remember to change the image in the Image Module and the copy in the Blurb Module to finish the team member section!

how-to-add-a-hover-effect-to-team-member-bios-in-divi-26 How To Add A Hover Effect To Team Member Bios In Divi

Preview

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

Desktop

how-to-add-a-hover-effect-to-team-member-bios-in-divi How To Add A Hover Effect To Team Member Bios In Divi

Mobile

how-to-add-a-hover-effect-to-team-member-bios-in-divi-1 How To Add A Hover Effect To Team Member Bios In Divi

Final Thoughts

In this post, we’ve shown you how to create a bio hover effect on hover for team member photos using Divi’s built-in options only. We’ve mentioned how important it is to create good about pages, as they’re one of the most visited pages websites. Using bio hover effects for team member photos will not only allow you to take your about page to the next level but also create an interaction with your visitors. 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

Share This