HTML CSS

SHOW TEXT OVER IMAGE ON HOVER

(a quick guide)

<div class="wrap">   <img src="IMG.JPG">   <div class="cap">FOO BAR!</div> </div>

THE HTML

01

RESPONSIVE IMAGE .wrap img { width: 100%; }

THE CSS

02

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; }