CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.
One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.
Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.
In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)
Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.
Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.
Ready? Let’s get started!
[Read more…] about Smooth Fading Image Captions with Pure CSS3