HTML CSS
(a quick guide)
<div class="wrap"> <img src="IMG.JPG"> <div class="cap">FOO BAR!</div> </div>
RESPONSIVE IMAGE .wrap img { width: 100%; }
PLACE CAPTION AT BOTTOM .wrap { position: relative; } .cap { position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; background: rgba(0, 0, 0, 0.5); }
ONLY SHOW TEXT ON HOVER .cap { display: none; } .wrap:hover .cap { display: block; }