Responsive Team Section Design using Bootstrap

For any industry, it is essential to add a team page or section to their website. When a new visitor comes, they always look for this section to know the company. This particular section of the website helps to build transparency and trust. Besides, it helps to reveal the company's identity, which also helps to grow the company's brand identity.

In this tutorial, we will be creating a Responsive Team Section using the Bootstrap framework. We will create a nice overlay animation on hover. When we hover over the image, the information of a team member of your company will pop up from the bottom. We are using a Bootstrap 3.3.7 version for this snippet. You can download the Bootstrap 3.3.7 version from their official website. After downloading and extracting, we have to copy the bootstrap and add it to our project. Bootstrap js file is not required in this snippet because there is no JavaScript-related work over here in this project. But when you design a complete website based on Bootstrap, you have to add the file to your project. I am a CDN version of Bootstrap CSS for this project, and I will put the link to the file below for your convenience.

Let's start the HTML markup for this project. First of all, we will take a div element with a team-area class. We will also add a ''section-padding'' class to it to give the div element a custom padding. Inside the team-area div, we will then take the container bootstrap class, which will contain all the team section components. We will create three separate team boxes in our project in a row. For that, we will create three three-column grids of Bootstrap's col-md-4 class. We will put those inside the ''row'' class because this bootstrap class is mainly used to hold the column in it.

Video Tutorial:

Let's start the HTML markup for this project. First of all, we will take a div element with a team-area class. We will also add a ''section-padding'' class to it to give the div element a custom padding. Inside the team-area div, we will then take the container bootstrap class, which will contain all the team section components. We will create three separate team boxes in our project in a row. For that, we will create three column grid of bootstrap's col-md-4 class. We will put those inside ''row'' class because this bootstrap class is mainly used to hold the column in it.

In each column grid, we will take a div element with a ''single-item'' class. For each single-team class, we will take two main div elements. The first named ''team-img'' class will contain the image, and the second one named ''team-content'' class will hold the information about the picture. Inside team-content div, we then take a div element named ''team-info'' class inside, which we will provide the name, designation, and some plain text.

You may also like:

• Sticky Navigation on Scroll CSS
• Contact form with input label animation
• CSS gradient border animation

Now that we have finished the HTML Markup let's style it. We will start by assigning a background color to the body, followed by a top and bottom padding of 150px to the section-padding class. We will give the single-team class a relative position value and a 70px padding from the bottom. We also provide a z-index value so that hover animation occurs, and Text can come over the image. We will then give it an overflow hidden value so that the content doesn't overlap. We will also provide a box-shadow effect to give the div element a subtle, sleek look. For the team-img class, we will provide a relative position class and set a z-index value of 5, followed by an overflow hidden value. To make the image full-width, we will add a width of 100% to the team-img class image. We also provide a transition value so that that the hover effect occurs smoothly.

Now the content of the team-content class remains at the bottom of the team-img div element. We will give it absolute value and provide a particular height and 100% width. We will then provide some basic styling for each component of team-info div. When we hover over the image, we want the image to scale slightly larger, so we will provide a transform scale value of 1.1 to the picture. Initially, the height of team-content div is 80px, but we want the size to be 150px when we hover over the single-team element. Besides, we will change the color of the h3 tag and background color of the team-content to a gradient color for the hover effect. By default, there will be no margin when we visit the mobile version of the snippet. We will provide a margin-bottom value for each single-team class for the responsive version.

ADD HTML:

<!DOCTYPE html> <html lang="en"> <!-- codingflicks.com --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Team Section Design using Bootstrap</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="team-area section-padding"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="single-team"> <div class="team-img"><img alt="" class="img-responsive" src="img/1.jpg"></div> <div class="team-content"> <div class="team-info"> <h3>Sophia Johnson</h3> <p>Designation</p> </div> <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quasi, vel.</p> </div> </div> </div> <div class="col-md-4"> <div class="single-team"> <div class="team-img"><img alt="" class="img-responsive" src="img/2.jpg"></div> <div class="team-content"> <div class="team-info"> <h3>Olivia Smith</h3> <p>Designation</p> </div> <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quasi, vel.</p> </div> </div> </div> <div class="col-md-4"> <div class="single-team"> <div class="team-img"><img alt="" class="img-responsive" src="img/3.jpg"></div> <div class="team-content"> <div class="team-info"> <h3>Emma Jones</h3> <p>Designation</p> </div> <p class="team-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quasi, vel.</p> </div> </div> </div> </div> </div> </div> </body> </html>


ADD CSS:

body { background: bisque; } .section-padding { padding: 150px 0; } .single-team { padding-bottom: 70px; position: relative; z-index: 1; overflow: hidden; box-shadow: 10px 20px 12px #727272; } .team-img { position: relative; z-index: 5; overflow: hidden; } .team-img img { width: 100%; transition: .3s; } .team-content { height: 80px; width: 100%; position: absolute; text-align: center; overflow: hidden; bottom: 0; transition: all .4s; background: #000; z-index: 5; } .team-info { padding: 5px 20px 5px 20px; transition: all .5s; } .single-team .team-content .team-info h3 { text-transform: uppercase; color: #fff; font-size: 20px; margin: 5px; font-weight: bold; } .team-info p { margin-top: 9px; color: #fff; font-size: 18px; } .single-team-text p { margin-top: 5px; } .team-text { color: #fff; padding: 0 10px 5px; } .single-team:hover .team-img img { transform: scale(1.1); } .single-team:hover .team-content { height: 150px; } .single-team:hover .team-info h3 { color: #fff; } .single-team:hover .team-content { background: linear-gradient(to right, #009fff, #ec2f4b); } @media (max-width:600px) { .single-team { margin-bottom: 30px; } }

Hope you got the code. Our website has many useful snippets of front-end development. Click the Load More button on the homepage to collect them. Thanks for visiting our website.

DOWNLOAD CODE