demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Hong Kong Skyline at Night
Monument Valley
 

HTML5 Image Captions With CSS Transition Effects

css / images

Estimated reading time: 1 minute, 42 seconds

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.