It’s been a while since I published my Pure html5 / css3 animated image captions and I thought I’d revisit the subject. The following demo is a slightly different take on the last – instead of hiding the captions and revealing them on mouseover this time I’m hiding the images and showing the captions first. The resulting animated images/captions are then animated using css3 2d and 3d transforms. Normally if you flip and element using transforms, it appears as a mirror-image, however if you use the backface-visibility property (set to hidden), the resulting element is then hidden. This is the key to the following animations.
the set-up
1 The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I’m allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).
<div class="vertical">
<figure>
<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
<figcaption class="orange">Joni Mitchell</figcaption>
</figure>
</div>
2 The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.
3 Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.
4 The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.
5 Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.
And here’s the full demo of my Animated image captions using the css backface-visibility property