Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-xs-6 tdproduct">
            <div class="thumbnail_container tdtn_c">
                <div class="thumbnail tdtn"><a class="tdom" href="https://farm1.staticflickr.com/42/84428658_678e940158_z.jpg?zz=1"><img class="img-responsive" src="https://farm1.staticflickr.com/42/84428658_678e940158_z.jpg?zz=1" alt="один" /></a>
                </div>
            </div>
            <div class="td-txtinfo">
                
<h3>один</h3>

            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 tdproduct">
            <div class="thumbnail_container tdtn_c">
                <div class="thumbnail tdtn"><a class="tdom" href="http://cdn.morguefile.com/imageData/public/files/h/hotblack/09/l/1410898050svm4r.jpg"><img class="img-responsive" src="http://cdn.morguefile.com/imageData/public/files/h/hotblack/09/l/1410898050svm4r.jpg" alt="" /></a>
                </div>
            </div>
            <div class="td-txtinfo">
                
<h3>два</h3>

            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 tdproduct">
            <div class="thumbnail_container tdtn_c">
                <div class="thumbnail tdtn"><a class="tdom" href="http://cdn.morguefile.com/imageData/public/files/l/lisasolonynko/02/l/1424960056u4tj1.jpg"><img class="img-responsive" src="http://cdn.morguefile.com/imageData/public/files/l/lisasolonynko/02/l/1424960056u4tj1.jpg" alt="" /></a>
                </div>
            </div>
            <div class="td-txtinfo">
                
<h3>три</h3>

            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 tdproduct">
            <div...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .col-md-3:hover.tdproduct, .col-sm-4:hover.tdproduct, .col-xs-6:hover.tdproduct {
    border:1px solid #ddd;
}
.col-md-3:hover.tdproduct, .col-sm-3:hover.tdproduct, .col-xs-4:hover.tdproduct {
    border:1px solid #ddd;
}
.thumbnail_container.tdtn_c {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom:10px;
    margin-top:20px;
}
.thumbnail.tdtn {
    position:absolute;
    width:100%;
    height:100%;
    border:none !important;
}
.thumbnail.tdtn img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
img {
    max-height:100%;
    max-width:100%;
}
.td-txtinfo {
    margin: 0 auto;
    background-color: #f0f0f0;
}
.td-txtinfo h3 {
    border-radius:4px;
    float: left;
    width: 100%;
    font-size: 1.2em;
    padding: 10px 4px;
    margin: 0;
    text-align: center;
}

JavaScript

$(".tdom").fancybox({
    openEffect: 'none',
    padding: 0,
    closeEffect: 'none'
});