Responsive Team Section with hover animation using Bootstrap

byCodingFlicks -August 09, 2020

0

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 we shared a blog on How to Make a Drop Down Menu using HTML and CSS. This tutorial on Team Section Design will use plain HTML, CSS, and the CSS framework Bootstrap. Responsive web design is necessary in modern web design. Bearing that mind we have made the snippet responsive. We have used CSS animation to get a nice hover on the image of Team images.

People working behind a company play 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 page 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.

Video Tutorial:

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 hovers over the image box. Each social media icon box will have a hover effect as well.

We have taken a div named team-area in this snippet, and inside that, We have taken a bootstrap class called the container. After placing a header text, We 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, We have taken a custom class named single-team inside, in which we placed all the contents necessary like images, 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, We have given a padding-top value to the team-area class. Then we provided a background color to a single-team class. We want the image to scale it bigger when we hover over the single-team div. For that, We have given the picture a transform scale value of 1.2. for the smooth transition, We have also provided a transition value for the image. Now we want the social div to create a rotating effect when we hover over the image boxes. For that, We 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 we 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 responsive responsive team section using Bootstrap, you need to create two files. One of them is an HTML file, and the other one is a CSS file. You also need to add Bootstrap and Font Awesome CDN as well. After that, you need to copy the HTML and CSS code, paste the code to the appropriate files, and save them. You can download the source code from the download button below this blog post.

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 with hover animation using Bootstrap</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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">
		<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 alt="" class="img-responsive" src="img/2.jpg">
							<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>Tom Smith</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 alt="" class="img-responsive" src="img/3.jpg">
							<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>Bob Jones</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 alt="" class="img-responsive" src="img/4.jpg">
							<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>Jack Miller</h4>
							<h5>Back-End Developer</h5>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

body{
	background: url(img/1.jpg);
	background-size: cover;
	background-position: center center;
}
.team-area{
	padding-top: 6%;
}
.single-team{
	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{
	transform: scale(1.2);
	transition: all 0.4s ease 0s;
}
.img-area:hover img{
	transform: scale(1.2);
}

@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: 0.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: #262626;
	text-align: center;
	background: #fff;
}
.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;
}

We hope you find it useful. To get more, you need to click the load more button on our homepage. Please visit more often to get more snippets. Thank you for visiting our website.

DOWNLOAD CODE

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