HTML CSS

HOW TO SHOW TEXT OVER IMAGE ON HOVER

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

THE HTML

01

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

THE CSS

02

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