<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"> <div class="row"> <div class="col-md-3"> <div class="news-features"> <a href="#"> <div class="poster"><img alt="" src= "http://lorempixel.com/300/200/cats/1/"></div> <div class="caption"> Lorem ipsum dolor </div></a> </div> <div class="news-features"> <a href="#"> <div class="poster"><img alt="" src= "http://lorempixel.com/300/200/cats/2/"></div> <div class="caption"> Typi non habent claritatem insitam; est usus legentis </div></a> </div> <div class="news-features"> <a href="#"> <div class="poster"><img alt="" src= "http://lorempixel.com/300/200/cats/3/"></div> <div class="caption"> anteposuerit litterarum </div></a> </div> </div> </div> </div>

.news-features .caption { font-size: 20px; font-weight: 100; position: absolute; bottom: 0; padding: 5px; color: white; text-shadow: 0 0 5px #000; } .news-features { position: relative; overflow: hidden; width: 300px; cursor: pointer; } .news-features:hover .poster:before { opacity: 0; } .news-features .poster:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; display: block; max-width: 100%; -webkit-transition: opacity .3s; background: rgba(0,0,0,.3); background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 60%,rgba(0,0,0,.7) 100%); } .news-features .poster img { width: 100%; }