It's no secret that "About Us" pages are great at driving clicks to your website. It is also this type of page that will emphasize the human part of the business behind the Website. Knowing this, we realize that it is important to pay attention to how we structure pages, what kind of information we share and how we create interactions.

One of the things you can do to improve the page experience is to provide a team members section that puts your employees in the spotlight. On top of that, you can add a biological hover effect to photos of team members using Divi's built-in options only.

This will allow you to save space on the page you are working on and create a hover interaction between you and your visiteurs.

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

Let's go!

Preview

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

Office

Mobile

Let's start recreating

Add a new section

Spacing

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

• Best padding: 100px
• Bottom padding: 100px

Add row 1

Column structure

Once you are done adding the custom fill to your section, you can close the section settings and add a new row using a single column.

Add a text module

Add H2 content

Add a Text Module title to the column with an H2 size of choice.

H2 text settings

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

• Heading 2 Font: Cinzel
• Title 2 Font Style: Small Caps
• Title 2 Text alignment: center
• Title 2 Text Size: 70px

Add a division module

Visibility

Continue adding a new separation module just below the Text Module title.

• Show Divider: Yes

Color of the separator

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

• Color of the separator: # 333333

sizing

Then we will reduce the size of the divider and center it.

• Width: 26%
• Alignment of the module: center

Add the 2 line

Column structure

Just below the previous line that you added, continue and add a new row using three columns of equal size.

sizing

Without adding more modules, open the line parameters and make some changes to the sizing parameters.

• Use a custom width: Yes
• Unit: PX
• Custom width: 2000px
• Use a custom gutter width: Yes
• Gutter width: 1
• Equalize column heights: Yes

Spacing

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

• Upper margin: 50px
• Bottom margin: 50px
• Top Padding: 10px
• Bottom padding: 10px
• Left Padding: 5px
• Upholstery Right: 5px
• Column 1, 2 and 3 Padding on the left: 5px
• Column 1, 2 and 3 Padding on the right: 5px

Shadow box

We also give our line a little depth by adding a box shadow with the following parameters:

• Box Shadow Blur Force: 80px
• Box shadow propagation force: -14px
• Shadow color: rgba (0,0,0,0,3)

Add an image module to column 1

Load an image into an image module

It's time to start adding modules! To achieve the biological hover effect, we will need two modules in total. an image module and a blurb module. The Image module will contain the image of the team member you want to present.

The Blurb mod, meanwhile, will be used to add the icon in the lower left corner and the hover biography. Add an image module to the first column using a square sized image.

filters

The design we create is entirely in grayscale. To add this shade of gray to our image, go to the filters settings and remove all saturation.

• Saturation: 0%

Add the Blurb module to the 1 column

Add content

Continue by adding a new Blurb module just below the image module in column 1. Add the team member's name to the title field and enter additional information about the team member in the box. contents.

Choose an icon

The next thing we'll do is choose a choice icon that will show visiteurs that there is more than just a photo.

Default background color

Next, we'll choose a full transparent background color.

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

Background color on flyover

And we will change this color hovering.

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

Default icon settings

We want a visible icon that will help visiteurs to understand that they can fly over it. Change the icon settings to get such an icon.

• Icon Color: #ffffff
• Circle icon: yes
• Circle color: # 000000
• Icon location: left
• Use Icon Font Size: Yes
• Icon Font Size: 50px

Hover icon setting

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

• Icon color: rgba (255,255,255,0)
• Color of circle: rgba (255,255,255,0)

Default title settings

Then go to the title's text settings and make some changes.

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

Hover over the text settings of the title

Change the size of the text by hovering.

• Text Title Size: 30px

Default body text settings

Also change the body text settings.

• Body Police: Open Sans
• Body colored text: # 000000
• Body text size: 0px
• Body height: 1.8em

Parameter of the body on overflight

And, again, change the body size of the text hovering.

• Body text size: 14px

Default spacing

Last but not least, we will need to create an overlap between the Blurb module and the image module using a negative upper margin.

• Upper margin: -3.7vw (desktop), -9vw (tablet and phone)
• Bottom margin: 1.5vw (tablet), 2vw (phone)

Stationary spacing

Change the custom margin and fill values ​​in rollover.

• Upper margin: -11,38vw
• Top Padding: 20px
• Bottom padding: 20px
• Upholstery Right: 50px

Clone the two modules twice and place the duplicates in the remaining columns.

We've finished creating our first biological hover effect. To save time, we can simply clone the two modules in column 1 twice and place the duplicates in the remaining two columns.

Edit the image and content of the Blurb module

Don't forget to change the image in the Image module and copy in the Blurb module to complete the team members section!

Preview

Now that we've gone through all of the steps, let's take a final look at how it looked on different screen sizes.

Office

Mobile

Latest Thoughts

In this article, we've shown you how to create a biological hover effect for photos of team members using Divi's built-in options only. We have emphasized how important it is to create good pages because they are one of the most visited websites.

Using bio hover effects for photos of team members will not only improve the quality of your page, but also create interaction with your visitors. If you have any questions or suggestions, be sure to leave a comment in the comments section below!