HTML CSS

HOW TO POSITION TEXT OVER IMAGE IN HTML CSS

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

WRAP IMGE IN FIGURE CAPTION

01

.textoverimg { position: relative; } .textoverimg figcaption {   position: absolute;   top: 0; left: 0; }

POSITION TEXT OVER IMAGE

02

.textover { max-width: 600px; } .textover img { width: 100%; } .textover figcaption {   color: white;   background: rgba(0,0,0,0.5); }

EXTRA CSS COSMETICS

03