How to overlay an image with text effects

A modern fad of sorts is to overlay some text over an image, to add commentary to that image. One method is to scribble the text directly into the image file, so that the text stays with the image. You might do this with Photoshop, or your content management system may have the ability to do so.

This page is covering a slightly different use case, where the text doesn't need to be scribbled into the image. Instead it's enough to just overlay the text over the image using CSS tricks.

Markup:

<div class="image">
      <img class="overlaid-image" src="path/to/imageFile.jpg" alt="" />
      <span class="overlaid-text">Four scores and seven years ago ... </span>
</div>

You could make the image the background of the wrapping div but - images are part of the content, and belong in the markup. We'll use the div as the container which gets positioned, and to position the text and image for the desired effect.

CSS:

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.overlaid-image { width: 100%; height: 100%; top: 0; left: 0; }

.overlaid-text { 
   position: absolute; 
   bottom: 1em; /* position as desired */ 
   left: 0; 
   width: 100%; 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}