Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div id="DivOurProducts" class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/1">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div></div></a></div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/2">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div></div></a></div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/3">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div></div></a></div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/4">
<div class="fixOverlayDiv"><img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300"><div class="OverlayText">Text Here</div></div></a></div>
</div>
</div>
CSS
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.fixOverlayDiv{
width:100%;
padding:0px;
}
.OverlayText{
background-color: #000;
bottom: 0;
color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
width: 100%;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */