<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 class="container-fluid"> <div class="row text-center"> <h3 style="color:white;font-family:verdana;">Snap Tight Image Tiles (Responisve)</h3> </div> <div class="row"> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/nightlife/2) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-8" style="background: url(http://lorempixel.com/600/200/nightlife/3) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/1) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/4) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/6) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-3" style="background: url(http://lorempixel.com/300/200/nightlife/) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/600/200/city/4) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/5) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-4" style="background: url(http://lorempixel.com/300/200/city/6) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/7) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> <div class="cover-card col-sm-6" style="background: url(http://lorempixel.com/300/200/city/8) no-repeat center top;background-size:cover;"> <p> Text Caption </p> </div> </div> </div>

body{ background: #333; } .cover-card { background: silver; padding: 0px; margin: 0px; height:250px; } .cover-card > p { position: relative; text-align: center; background-color: rgba(6,6,6,0.0); color: rgba(6,6,6,0.0); width: 100%; height: 100%; font-weight: bold; font-size: 20px; } .col-sm-3.cover-card > p { padding: 24% 2%; } .col-sm-4.cover-card > p { padding: 22% 2%; } .col-sm-6.cover-card > p { padding: 14% 2%; } .col-sm-8.cover-card > p { padding: 11% 2%; } .cover-card:hover > p { background-color: rgba(6,6,6,0.3); color: white; text-shadow: 3px 3px 10px #000; }