<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="main-box"> <img src="http://via.placeholder.com/350x150"> <div class="subtitle"> <span>Subtitle</span> </div> </div> </div> </div>

.main-box{ position:relative; display:block; max-width:350px; } .main-box > img{ max-width:100%; height:auto; display:block; } .main-box > .subtitle{ position:absolute; bottom:0; right:0; left:0; padding:12px; background-color:rgba(0,0,0,0.5); transition:300ms; } .main-box > .subtitle > span{ color:white; font-weight:bolder; } .main-box:hover > .subtitle{ background-color:rgba(255,0,0,0.5); }