<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <!-- Uses background color to fade color from behind. --> <!-- Uses empty span to overlay color. --> <div id="overlay"> <img src="http://images.all-free-download.com/images/wallpapers_thum/small_sea_wave_hdtv_1080p_5946.jpg" height="200" width="400" /> <span> Download </span> <div> </div> </div>

div { position: relative; overflow:hidden; float: left; } img { display: block; } #background { background: red; } #background:hover img { opacity: 0.5; } #overlay span { background: black; bottom: 0; display: block; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 1; text-align:center; padding-top:20%; } #overlay span { opacity: 0.7; } .caption{ display: block; margin: auto; position: absolute; width: 50%; height: 50%; }