All the above demos have been tested in Safari 5.2, Firefox 7.0.1, Chrome 15.0.874.121 & Opera 11.52 on Mac. They are 100% pure CSS3 solutions and they all make use of the following semantic HTML5 markup for images and captions:
<figure> <img src="sample-image.png" width="200" height="200" alt="sample image description" /> <figcaption>sample caption</figcaption> </figure>
Experiment with the code…
All 6 of the above demos are available on dabblet where you can play with the code:
Afterthought: Webkit only…
This one is Webkit (Safari / Chrome) only as the animation on letter-spacing doesn't work with the other browsers. I thought I'd add it as I like it :)