Bootstrap Tumblr cards redesign concept


<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="javascript:;">@Placemi</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="javascript:;">@Placemi</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="javascript:;">@Placemi</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="javascript:;">@Placemi</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;
    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%;
    -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);
}

.panel.panel-card .panel-figure img {
    opacity: 1;
    
    -webkit-transition: opacity 400ms ease-in-out;
            transition: opacity 400ms ease-in-out;
}

.panel.panel-card .panel-figure img:hover {
    opacity: .75;
}

.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;
}