HTML CSS

POSITION TEXT OVER IMAGE IN HTML CSS

(quick & simple example)

<figure class="textover">   <img src="IMAGE.jpg">   <figcaption>CAPTION </figcaption> </figure>

WRAP IMAGE IN FIGURE CAPTION

01

PLACE TEXT AT BOTTOM LEFT CORNER .textover { position: relative; } .textover figcaption {   position: absolute;   bottom: 0; left: 0; }

POSITION TEXT OVER IMAGE

02

RESPONSIVE IMAGE .textover img { width: 100%; } .textover { max-width: 600px; }

OPTIONAL CSS

03

CAPTION TEXT COSMETICS .textover figcaption {   color: white;   background: rgba(0,0,0,0.5); }