<h1 class="text-center">Meet Our Team</h1>
<div class="container">
<div class="row">
<!--team-1-->
<div class="col-lg-4">
<div class="our-team-main">
<div class="team-front"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454870/team-3.jpg" class="img-fluid" />
<h3>William</h3>
<p>Web Designer</p>
</div>
<div class="team-back"> <span> William is a web designer at Google inc. having 10+ years of experience in web development. William's hobby is to play table tennis and all type of indoor games. </span> </div>
</div>
</div>
<!--team-1-->
<!--team-2-->
<div class="col-lg-4">
<div class="our-team-main">
<div class="team-front"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1562038346/andrew_decristofaro.jpg" class="img-fluid" />
<h3>David</h3>
<p>Project Manager</p>
</div>
<div class="team-back"> <span> David is a Project Manager at Apple inc. having 15+ years of experience in Android application development. William's hobby is to play Football and all type of outdoor games. </span> </div>
</div>
</div>
<div class="col-lg-4">
<div class="our-team-main">
<div class="team-front"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1562038385/Emily_20Rekstis.jpg" class="img-fluid" />
<h3>Niharika</h3>
<p>Hybris Developer</p>
</div>
<div class="team-back"> <span> Niharika is a Hybris Developer at Google India. having 7+ years of experience in Hybris application development. William's hobby is to travel all around the world and play all type of games. </span> </div>
</div>
</div>
</div>
</div>
body {
background: #ADD8E6
}
h1 {
color: #000;
margin: 40px 0 60px 0;
font-weight: 300
}
.our-team-main {
width: 100%;
height: auto;
border-bottom: 7px #8B0000 solid;
background: #fff;
text-align: center;
border-radius: 10px;
overflow: hidden;
position: relative;
transition: 0.5s;
margin-bottom: 28px
}
.our-team-main img {
border-radius: 50%;
margin-bottom: 20px;
width: 90px
}
.our-team-main h3 {
font-size: 20px;
font-weight: 700
}
.our-team-main p {
margin-bottom: 0
}
.team-back {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
padding: 5px 15px 0 15px;
text-align: left;
background: #fff
}
.team-front {
width: 100%;
height: auto;
position: relative;
z-index: 10;
background: #fff;
padding: 15px;
bottom: 0px;
transition: all 0.5s ease
}
.our-team-main:hover .team-front {
bottom: -200px;
transition: all 0.5s ease
}
.our-team-main:hover {
border-color: #FF0000;
transition: 0.5s
}