HTML CSS
<div class="wrap"> <img src="IMG.JPG"/> <div class="cap">FOO BAR!</div> </div>
WRAPPER .wrap { position: relative; } RESPONSIVE IMAGE .wrap img { width: 100%; }
.cap { CAPTION DIMENSIONS box-sizing: border-box; width: 100%; PLACE AT BOTTOM position: absolute; bottom: 0; left: 0; }
SHOW & HIDE .cap { display: none; } .wrap:hover .cap { display: block; }