How To Add A Bio Hover Effect To Team Member Photos In Divi

Posted on April 11, 2017 by in Divi Resources | 16 comments

How To Add A Bio Hover Effect To Team Member Photos In Divi

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 . I learned this technique in her , where you can find awesome hover effects just like this one and more.

How To Add A Bio Hover Effect To Team Member Photos In Divi

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:

<div class="hover-bio-wrapper">
<div class="hover-bio">
<figure class="hover-bio">
<img src="IMAGE-URL-GOES-HERE">
<figcaption>
<h2>TEAM MEMBER NAME</h2>
<p>CAPTION</p>
</figcaption>
</figure>
</div>
</div>

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.

16 Comments

  1. Huh! I just wrote in a PM-sheet today: “Employees: Profile cards with contact info”. How convenient that this arrived in my inbox now)))

  2. Also timely for me. We would like to change the link words “read more here” with “full bio”. Any idea how to do that?

    • As far as I can see the words “read more here” were not in the coding. You an modify the text in the red block by editing the text editor tab of the content area, where you’ve put the first bit of coding.

  3. Not so sure I’m liking the overlay over the persons face – anyway to get a variant on this ?

    • Hi Amanda,

      You could have it slide down using a little jquery and css. There is no html involved so it’s pretty easy for a client to update.

    • I’d imaging you can override the background colour with something similar to….

      background: rgba(0,0,0,0.5);

      I just wrote/sourced a similar piece of code.

  4. is there a way to put a social icons in the Bio?

  5. Thinking about using it for a small product site! An overlay product photo. Interesting! Thank you!

  6. Hi,
    Thanks for the article. I’m waiting for the article where you are you write about long bio member which you need hide but must be an option for someone who wants to read that bio. Is it possible to join team and toggle module somehow?

  7. I like it! I might reduce the opacity a bit more, but it looks nice. Don’t clutter the page with text if no one is going to read it. Nice approach.

  8. I was wondering if there is a way to scroll the CAPTION text. I’m putting a bio here and i’m longer than what can go over a 500×500 picture. Appreciate any advice.

  9. Hi, can I do something like that but instead of a Bio, with a logo?
    I need a roll over, I ‘m using this code, but it is not responsive with mobile:

    can you help me?

    Thanks!

  10. Wow just saw this, thanks for the mention Nathan 🙂

    Great detailed explanation!

  11. How would I go about making the image bios always there rather than appearing just on hover?

  12. Thanks for the tutorial. What is the code to add the effect in reverse format. When users hover the mouse over the text – the image should appear (for the push right or left) – this we can use for NSFW images, providing a description to the user that image is 18+ (art nude)

  13. Thanks for the tutorial. What is the code to add the effect in reverse format. When users hover the mouse over the text – the image should appear (for the push right or left) – this we can use for NSFW images, providing a description to the user.

500,591 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
читать дальше на сайте www.profvest.com

profvest.com

В интеренете нашел популярный сайт с информацией про что такое файлы cookie.

Pin It on Pinterest