HTML5 Image Captions With CSS Transition Effects

Variations on this UI technique have been appearing around the web recently, so I decided to code my own version as a short lesson. In the examples above I show two versions of the effect: an image cross-fade and a long scroll, both with captions that slide into place. The HTML5 markup looks like this:

<div id="sliding-container">

<figure>

<img src="hong-kong-skyline.jpg" alt="">

<figcaption>Hong Kong Skyline at Night</figcaption>

</figure>

<figure>

<img src="monument-valley-panorama.jpg" alt="" style="position: absolute">

<img src="monument-valley-mittens-panorama.jpg" alt="">

<figcaption>Monument Valley</figcaption>

</figure>

</div>

We’ll give each <figure> relative positioning, which will come in handy in the cross-fade example. overflow is set to hide anything outside the immediate area of the image after we position the captions, and the figure elements set side-by-side with float:

div#sliding-container figure { margin: 0; padding: 0; position: relative; width: 50%; font-size: 0; overflow: hidden; }

div#sliding-container figure:nth-child(1) { float: left; }

div#sliding-container figure:nth-child(2) { float: right; }

The captions are provided with an rgba background color, while using position: absolute:

div#sliding-container figure figcaption { background: rgba(0,0,0,0.3); color: #fff; padding: .3rem; position: absolute; transition: .6s; }

Making the captions rise when the user hovers over an image is very simple: simply attach a :hover pseudo-selector to the <figure> that changes the position of the descendant <figcaption>.

div#sliding-container figure:hover figcaption { transform: translateY(-2rem); }

Next we want to animate the images inside each <figure>. First, we need to set them up correctly:

div#sliding-container figure img { max-width: 100%;

transition-duration: 2.4s;

transition-property: transform, opacity;

transition-timing-function: linear; }

div#sliding-container figure:nth-child(1) img { max-width: 133%; }

The first image, which is larger than its container, must move right to left:

div#sliding-container figure:nth-child(1):hover img { transform: translateX(-24%); }

Because they are absolutely positioned, the images of Monument Valley will appear one top of the other. We want to fade out the first image on hover; the selector to do so is rather more complex, although we could shortcut this to some degree by adding an id to the figure:

div#sliding-container figure:nth-child(2):hover img:nth-child(1) { opacity: 0; }

The panoramic photograph of Hong Kong is by Gary Elsasser; photographs of Monument Valley are taken by Alex Proimos and Ernesto Andrade, respectively.