<section id="t-cards">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-4">
<div class="panel panel-default panel-card">
<div class="panel-heading"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-3.jpg" /> <button class="btn btn-primary btn-sm" role="button">Follow</button> </div>
<div class="panel-figure"> <img class="img-responsive img-circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /> </div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="">Shalini Singh</a></h4> <small>CEO</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-2.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /></a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 col-md-4">
<div class="panel panel-default panel-card">
<div class="panel-heading"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-3.jpg" /> <button class="btn btn-primary btn-sm" role="button">Follow</button> </div>
<div class="panel-figure"> <img class="img-responsive img-circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /> </div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="">Priyanka</a></h4> <small>Manager</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-2.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /></a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 col-md-4">
<div class="panel panel-default panel-card">
<div class="panel-heading"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-3.jpg" /> <button class="btn btn-primary btn-sm" role="button">Follow</button> </div>
<div class="panel-figure"> <img class="img-responsive img-circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /> </div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="">Sonal</a></h4> <small>Designer</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-1.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-2.jpg" /></a> </div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <a href=""> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1563294707/Profile/img-2.jpg" /></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
body {
background-color: #000
}
#t-cards {
padding-top: 80px;
padding-bottom: 80px;
background: #000
}
.panel.panel-card {
position: relative;
height: 241px;
border: none;
overflow: hidden
}
.panel.panel-card .panel-heading {
position: relative;
z-index: 2;
height: 120px;
border-bottom-color: #fff;
overflow: hidden;
-webkit-transition: height 600ms ease-in-out;
transition: height 600ms ease-in-out
}
.panel.panel-card .panel-heading img {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 120%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0)
}
.panel.panel-card .panel-heading button {
position: absolute;
top: 10px;
right: 15px;
z-index: 3
}
.panel.panel-card .panel-figure {
position: absolute;
top: auto;
left: 50%;
z-index: 3;
width: 70px;
height: 70px;
background-color: #fff;
border-radius: 50%;
opacity: 1;
-webkit-box-shadow: 0 0 0 3px #fff;
box-shadow: 0 0 0 3px #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out
}
.panel.panel-card .panel-body {
padding-top: 40px;
padding-bottom: 20px;
-webkit-transition: padding 400ms ease-in-out;
transition: padding 400ms ease-in-out
}
.panel.panel-card .panel-thumbnails {
padding: 0 10px 10px
}
.panel-thumbnails .thumbnail {
width: 70px;
max-width: 100%;
margin: 0 auto;
background-color: #000
}
.panel.panel-card:hover .panel-heading {
height: 55px;
-webkit-transition: height 400ms ease-in-out;
transition: height 400ms ease-in-out
}
.panel.panel-card:hover .panel-figure {
opacity: 0;
-webkit-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out
}
.panel.panel-card:hover .panel-body {
padding-top: 20px;
-webkit-transition: padding 400ms ease-in-out;
transition: padding 400ms ease-in-out
}