Responsive Team Section with hover animation using Bootstrap

byCodingFlicks -August 09, 2020

0

Responsive Team Section with hover animation using Bootstrap

Hello, and welcome to the blog. Today we will create a snippet on making a Responsive Team Section Design using HTML CSS and Bootstrap. Earlier I have shared a blog on How to Make a Drop Down Menu using HTML and CSS. This tutorial of Team Section Design will use plain HTML, CSS, and CSS framework Bootstrap. We use CSS animation to get a nice hover on the image of Team images.

People working behind a company played a vital role in the company's progress. They are a crucial part of the industry itself. When we visit a website, we observe a section or about us page that includes information on that particular company's workers. Team pages or sections are popular segments of any website. This section or pages includes all the information of the employees of the industry. It increases the trust of the visitor whenever they try to find information about the company.

In this blog (Responsive Team Section Design using HTML CSS and Bootstrap), we will create a nice CSS transform and scale hover effect on the team member images. Image boxes will contain short information of the employee (like name, designation, and so on), and the social media icons will show up whenever a visitor will hover over the image box. Each social media icon box will have a hover effect as well.

I have taken div named team-area in this snippet, and inside that, I have taken a bootstrap class called the container. After placing a header text, I have taken three div with bootstrap grid column classes inside row class so that the image boxes automatically fit in different devices. Inside the bootstrap grid classes, I have taken a custom class named single-team inside, which I placed all the contents necessary like image, information of the pictures, font-awesome icons, etc. For the implementation of this snippet, you need to add bootstrap and font-awesome CDN along with an external CSS file to your project.

We are moving on to CSS code. First, we will start by giving a background color to the body. After providing some basic styling to the header text, I have given a padding-top value to team-area class. Then I have provided a background color to a single-team class. I want the image to scale it bigger when I hover over the single-team div. For that, I have given the picture a transform scale value of 1.2. for the smooth transition, I have also provided a transition value for the image. Now I want the social div to create a rotating effect when I hover over the image boxes. For that, I have provided a transform rotateY value of 180deg and scale(0.5, 0.5) to the social div. The image information will remain static down below the image. So I gave the img-text class element some basic style that makes them look stylish for the project.

You may also like:

Team Section Design using Bootstrap (Source Code):

To create this, you need to create two files. One of them is an HTML file, and the other one is the CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

HTML:

<div class="team-area">
  <div class="container">
   <h2 class="text-center">
Meet the team</h2>
<div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/Kjttv7qb/1.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="img-text">
            <h4>
John Doe</h4>
<h5>
UI/UX Designer</h5>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/25JWQ9gm/2.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="img-text">
            <h4>
Dave Wood</h4>
<h5>
Photographer</h5>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/nckQRhN3/3.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="img-text">
            <h4>
Malvin Doe</h4>
<h5>
Back-End Developer</h5>
</div>
</div>
</div>
</div>
</div>
</div>

CSS:

body{
background: #ddd;
}
    h2 {
text-transform: uppercase;
margin-bottom: 30px;
font-weight: bold;
font-size: 50px;
}
.team-area{
padding-top: 3%;
}
.single-team{
background-color: dodgerblue;
margin-bottom: 10px;
}
.single-team:hover .social{
cursor: pointer;
opacity: 1;
transform: rotateY(0deg) scale(1, 1);
}
.img-area{
overflow: hidden;
position: relative;
}
.img-area img{
width: 100%;
}
.img-area:hover img{
transform: scale(1.2)
}
.img-area img{
transition: all 0.4s ease 0s;
}
@media (max-width: 768px){
.img-area img{
    display: inline-block;
}
}
.img-area .social{
background-color: rgba(0,0,0,0.7);
position: absolute;
text-align: center;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
transition: .5s;
transform: rotateY(180deg) scale(0.5, 0.5);
}
.img-area .social ul{
text-align: center;
position: relative;
top: 175px;
}
.img-area .social ul li a{
border: 1px solid #fff;
color: #fff;
display: block;
font-size: 20px;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
}
.img-area .social ul li a:hover{
background-color: #fff;
color: #000;
border: 1px solid transparent;
}
.img-text{
padding: 25px;
color: #fff;
text-align: center;
}
.img-text h4 {
margin: 0 0 5px;
font-size: 30px;
font-family: lato;
letter-spacing: 5px;
text-transform: uppercase;
font-weight: bold;
}
.img-text h5{
font-size: 17px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}

I hope you find it useful. Thank you very for stopping by in this blog. Please visit more often to get this kind of snippet.

Please do not enter any spam link in the comment box.