<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 ----------> <div id="panel-group-cards"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="cards 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"> <span>GroupGroupGroupGroup1234</span> <!--<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/73.jpg" />--> </div> <div class="panel-body text-center"> <p>A short description goes here.</p> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="cards 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"> <span>GroupGroupGroupGroup1234</span> </div> <div class="panel-body text-center"> <p>A short description goes here.</p> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="cards 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"> <span>GroupGroupGroupGroup1234</span> </div> <div class="panel-body text-center"> <p>A short description goes here.</p> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4"> <div class="cards 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"> <span>GroupGroupGroupGroup1234</span> </div> <div class="panel-body text-center"> <p>A short description goes here.A short description goes here.A short description goes here.A short description goes here.A short description goes here.A short description goes here.A short description goes here.</p> </div> </div> </div> </div> </div> </div>

#panel-group-cards{ padding-top: 80px; padding-bottom: 80px; background-color: #345; } /********************************/ /* Panel cards */ /********************************/ .cards.panel.panel-card { position: relative; height: 241px; border: none; overflow: hidden; } .cards.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; */ } .cards.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); } .cards.panel.panel-card .panel-heading button { position: absolute; top: 10px; right: 15px; z-index: 3; } .cards.panel.panel-card .panel-figure { position: absolute; top: auto; left: 50%; z-index: 3; width: auto; padding: 5px; background-color: #5bc0de; border-radius: 3px; text-align: center; 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; */ } .cards .panel-figure span { font-size: 14px; font-weight: bold; color: #fff; } .cards.panel.panel-card .panel-body { padding: 35px 20px 0; /* -webkit-transition: padding 400ms ease-in-out; transition: padding 400ms ease-in-out; */ } /* .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; } */