<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-6 col-md-3"> <a href="#" class="panel panel-default panel-card"> <div class="panel-heading"> <img src="https://unsplash.imgix.net/12/barley.jpg?q=75&fm=jpg&s=f39de5ca1970a13dbe6af6c86b3c47ec" /> <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/adellecharles/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/mzwlj/60x60" /> </div> </div> <div class="col-xs-4"> <div class="thumbnail"> <img src="http://placemi.com/yboaj/60x60" /> </div> </div> <div class="col-xs-4"> <div class="thumbnail"> <img src="http://placemi.com/gv3bp/60x60" /> </div> </div> </div> </div> </a> </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: #345; } /********************************/ /* Panel cards */ /********************************/ .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 15px 20px; } .panel-thumbnails .thumbnail { width: 60px; max-width: 100%; margin: 0 auto; background-color: #fff; } .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; }