Responsive Image Tiles A template, demonstrating a set of responsive image tiles

<div class="container-fluid">
    <div class="row text-center">
        <h3 class="headermessage">Responsive Image Tiles</h3>
    </div>
    <div class="row">
        <div class="image-block col-sm-4" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city1.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-8" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city2.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city3.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city4.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city5.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-8" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city6.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>
        </div>
        <div class="image-block col-sm-4" style="background: url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city7.jpg) no-repeat center top;background-size:cover;">
            <p> Image Info </p>            
        </div>
    </div>
</div>

<style>
.headermessage {
  margin: 19px;
  color: black;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.image-block {
    border: 3px solid white ;
    background-color: black;
    padding: 0px;    
    margin: 0px;
    height:200px;
    text-align: center;
    vertical-align: bottom;
}
.image-block > p {
    width: 100%;
    height: 100%;
    font-weight: normal;
    font-size: 19px;
    padding-top: 150px;
    background-color: rgba(3,3,3,0.0);
    color: rgba(6,6,6,0.0);
}
.image-block:hover > p {
    background-color: rgba(3,3,3,0.5);    
    color: white;    
}
</style>