<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="heading-title text-center">
<h3 class="text-uppercase">Our professionals </h3>
<p class="p-top-30 half-txt">Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend. </p>
</div>
<div class="col-md-4 col-sm-4">
<div class="team-member">
<div class="team-img">
<img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive">
</div>
<div class="team-hover">
<div class="desk">
<h4>Hi There !</h4>
<p>I love to introduce myself as a hardcore Web Designer.</p>
</div>
<div class="s-link">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
<div class="team-title">
<h5>Martin Smith</h5>
<span>founder & ceo</span>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="team-member">
<div class="team-img">
<img src="https://image.freepik.com/free-photo/elegant-man-with-thumbs-up_1149-1595.jpg" alt="team member" class="img-responsive">
</div>
<div class="team-hover">
<div class="desk">
<h4>Hello World</h4>
<p>I love to introduce myself as a hardcore Web Designer.</p>
</div>
<div class="s-link">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
<div class="team-title">
<h5>Franklin Harbet</h5>
<span>HR Manager</span>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="team-member">
<div class="team-img">
<img src="https://image.freepik.com/free-photo/well-dressed-executive-with-crossed-arms_1098-3930.jpg" alt="team member" class="img-responsive">
</div>
<div class="team-hover">
<div class="desk">
<h4>I love to design</h4>
<p>I love to introduce myself as a hardcore Web Designer.</p>
</div>
<div class="s-link">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
</div>
</div>
<div class="team-title">
<h5>Linda Anderson</h5>
<span>Marketing Manager</span>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic);
body {
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.5;
color: #323232;
font-size: 15px;
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
.heading-title {
margin-bottom: 100px;
}
.text-center {
text-align: center;
}
.heading-title h3 {
margin-bottom: 0;
letter-spacing: 2px;
font-weight: normal;
}
.p-top-30 {
padding-top: 30px;
}
.half-txt {
width: 60%;
margin: 0 auto;
display: inline-block;
line-height: 25px;
color: #7e7e7e;
}
.text-uppercase {
text-transform: uppercase;
}
.team-member, .team-member .team-img {
position: relative;
}
.team-member {
overflow: hidden;
}
.team-member, .team-member .team-img {
position: relative;
}
.team-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
border: 20px solid rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.90);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.team-member:hover .team-hover .desk {
top: 35%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
opacity: 1;
}
.team-hover .desk {
position: absolute;
top: 0%;
width: 100%;
opacity: 0;
-webkit-transform: translateY(-55%);
-ms-transform: translateY(-55%);
transform: translateY(-55%);
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
padding: 0 20px;
}
.desk, .desk h4, .team-hover .s-link a {
text-align: center;
color: #222;
}
.team-member:hover .team-hover .s-link {
bottom: 10%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
opacity: 1;
}
.team-hover .s-link {
position: absolute;
bottom: 0;
width: 100%;
opacity: 0;
text-align: center;
-webkit-transform: translateY(45%);
-ms-transform: translateY(45%);
transform: translateY(45%);
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
font-size: 35px;
}
.desk, .desk h4, .team-hover .s-link a {
text-align: center;
color: #222;
}
.team-member .s-link a {
margin: 0 10px;
color: #333;
font-size: 16px;
}
.team-title {
position: static;
padding: 20px 0;
display: inline-block;
letter-spacing: 2px;
width: 100%;
}
.team-title h5 {
margin-bottom: 0px;
display: block;
text-transform: uppercase;
}
.team-title span {
font-size: 12px;
text-transform: uppercase;
color: #a5a5a5;
letter-spacing: 1px;
}
