<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<section id="t-cards">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="http://p1.pichost.me/i/66/1910857.jpg" />
<button class="btn btn-primary btn-sm" role="button"><span class="ladda-label">Follow</span></button>
</div>
<div class="panel-figure ">
<img class="img-responsive img-circle" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xfl1/v/t1.0-9/11014974_1086421761385084_6392619533013339896_n.jpg?oh=dde762a57716ab0e17413050329c95b8&oe=56A8A7DF&__gda__=1453168538_efbc60ff6ae44ffc5e8c35e164566a2f" />
</div>
<div class="col-sm-2 col-md-4">
<div class="panel-body text-right">
<h4 class="panel-header"><a href="#">Cris R</a></h4>
<p1><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span></p1>
<br>
<small>Miyapur, Hyderabd</small>
<br>
<small>Telangana</small>
<br>
<Small>A short description about the Snapper</Small>
</div>
</div>
<div >
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/mzwlj/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/mzwlj/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/yboaj/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
<div class="col-xs-1">
<div class="rounded">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br>
<div class="col-sm-8 col-md-6">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://unsplash.imgix.net/41/bXoAlw8gT66vBo1wcFoO_IMG_9181.jpg?q=75&fm=jpg&s=a760fd82863937c841f4b3870cdef011" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/josue/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/dstb9/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/2lsao/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/urcon/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 col-md-6">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/19/waves.JPG?q=75&fm=jpg&s=6f316bc8e1dc9887a7cebe0841096e99" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mutlu82/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/7an8e/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/wntpb/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/jrzxa/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 col-md-6">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/26/camera-keys.jpg?q=75&fm=jpg&s=b919d3158053cde8e9f0e37b4876c14f" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/nisaanjani/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/sqfuk/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/71mf8/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/1pdrw/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/*
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
Image credits: unsplash.com, uifaces.com/authorized
Image placeholders: placemi.com
*/
#t-cards {
padding-top: 80px;
padding-bottom: 80px;
background-color: #c7c7c7;
}
/********************************/
/* Panel cards */
/********************************/
.panel.panel-card {
position: relative;
height: 255px;
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 400ms ease-in-out;
transition: height 400ms 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: 10%;
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: 35px;
padding-bottom: 20px;
-webkit-transition: padding 400ms ease-in-out;
transition: padding 400ms ease-in-out;
}
.panel.panel-card .panel-thumbnails {
padding: 0 15px 20px;
}
.panel-thumbnails .thumbnail {
width: 70px;
max-width: 100%;
margin: 0 auto;
background-color:white;
}
.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;
}
.ladda-button{position:relative}
.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:-16px;opacity:0;pointer-events:none}
.ladda-button .ladda-label{position:relative;z-index:3}
.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:14px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:4px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:14px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:-16px}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:14px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:-16px}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:-16px}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:-16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:-16px;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:-16px}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:-16px;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:-16px}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:-16px}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 3000px rgba(0,0,0,0)}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:-16px}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 3000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1}
