Today’s post was created and submitted by Trey Barrow, a community member with a passion for Div and web design.


Out of the many kinds of pages you can choose to have on your website, having a page solely dedicated to showing off your team should definitely be towards the top of your list. Not only does a team page show off a bit of your company’s culture, it allows for your clients and visitors to get a glimpse of the men and women working hard behind the scenes of your brand. This gives your business a much more relatable appearance, which often makes the difference between a mediocre business and a thriving one.

In this tutorial I’m going to show you how to add a simple effect to your team member photos that will display a small bio when you mouse over them. All of this is done with the Divi Text Module and a few painless copy and pastes of code.

The Concept and Inspiration

Inspiration for this tutorial comes from Divi community blogger and web designer Michelle Nunan at Divi Soup. I learned this technique in her blog post, where you can find awesome hover effects just like this one and more.

Step 1: Uploading Your Team Photos

The first step is to upload any team photos that you’re going to be using for your team page.

For this tutorial, you want to make sure that all of your photos are the same size and aspect ratio. You’ll also want to make sure that your photos are all a decent size. For my example, I’m using images that are 500px by 500px.

Once your pictures are uploaded, you’ll want to make a list of each photo’s respective URLs, as you’ll need them later on.

These can be found by clicking on a photo’s thumbnail in the media gallery and looking to the right side of the Attachment Details page.

url-location-1

Once that’s finished, you’re all set to start building your team bio section.

Step 2: Building Out The Section

bio-hover-effect-builder-image-1

The first thing you need to do is create a standard section. Assign your section a background color of #363F45. Next, add a single row with a single column. Insert a text module for your team member heading. I’ve used the Roboto font, set to all caps, color #ffffff (white), and a font size of 40px.

bio-hover-effect-builder-image-2

Now add a second row below the first with 2-3 columns. I’m using two for this example but your choice will likely depend on how many people are on your team. I’d recommend sticking to a max of 3 columns for readability though. The larger the photo, the more room there is to display text.

bio-hover-effect-builder-image-3

Next, add a single text module and paste the following code into the text editor tab of the content area:

TEAM MEMBER NAME

CAPTION

bio-hover-effect-builder-image-4

After pasting the above code in, click the green check mark to save and close the text module settings. Then, duplicate the text module so that there is one to represent each member of your team. In my example that’s a total of 4.

bio-hover-effect-builder-image-5

Now you can go back into each text module and replace the text “IMAGE-URL-GOES-HERE” with the image url for each team member. Then replace the text “TEAM MEMBER NAME GOES HERE” with the name of your respective team member. Finally, replace the text “CAPTION GOES HERE” with your bio content.

bio-hover-effect-builder-image-6

Click save and exit. Repeat this step for each text module and you’re done with the hardest part!

Step 3: Copy and Paste CSS

You’re almost there. Click on the settings button in the top right corner of the Divi Builder to open the Divi Builder Settings.

bio-hover-effect-page-settings-1

Paste the following code into the Custom CSS box:

.hover-bio-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}

figure.hover-bio img{
	display: block;
}

figure.hover-bio { 
	position: relative;
	overflow: hidden; 
    margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 0;
	
}

figure.hover-bio::before, figure.hover-bio::after{
	position: absolute;
	background: black;
            opacity: 0.3;
            content: '';
	height: 100%;
            width: 100%;
	display: block;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}

figure.hover-bio figcaption{
	position: absolute;
	background: #fff;
            display: block;
	line-height: 1.7em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	padding: 10px;
	z-index: 100;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 0;
	-moz-transform: translate3d(-100%, -50%, 0);
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	opacity: 0;
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}

figure.hover-bio img{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}

figure.hover-bio figcaption{
	top: 100%;
	opacity: 1;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.hover-bio:hover img {
            opacity: .5;
}

figure.hover-bio:hover figcaption{
	background-color: #E91E63;
	color: #fff;
            opacity: .9;
	-moz-transform: translate3d(0, -100%, 0); 
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
            box-shadow: 0px -2px 28px rgba(255,255,255, 0.3);
}

Click save and Voilà! You should have the hover effect on all of your team’s photos.

bio-hover-effect-final-result

In Conclusion

It doesn’t matter whether you have 2 team members or 10, hover effects are an easy way to spice up your team page by displaying your content in an interactive and visually engaging manner. In web design it’s often the little details like this that truly make a site stand out.

The post How To Add A Bio Hover Effect To Team Member Photos In Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]

Canadian Web Hosting [Ad]