<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <section id="t-cards"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3"> <div 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> </div> </div> <div class="col-sm-6 col-md-3"> <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-6 col-md-3"> <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-6 col-md-3"> <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: #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; }