18 May 2013

Fun with figure & figcaption elements

It's nice having the new HTML5 elements figure & figcaption to semantically markup a picture with a caption. The W3C describes the element as follows:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

And here's a snippet on how to get a caption that sits over the bottom of the photo as shown below:

Morgan Freeman Holding Cotton Candy
Morgan Freeman Holding Cotton Candy.

The Markup:

<figure>
  <img src="/images/yourimage.jpg" alt="Image description">
  <figcaption>This is a caption</figcaption>
</figure>

The CSS:

 /* Relatively position the figure so we can absolutely position 
    the caption over the photo */
figure {
  position: relative;
  max-width: 400px;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
  width: 100%;
  padding: 20px;
  color: #FFF;
  background: #000000; /* Fallback color */
  background: rgba(0, 0, 0, .6);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}