Thumbnail Captions on Hover: Pure CSS Transitions
Karen Menezes on September 12, 2012Agent F-bar: Ma, I wanna see some pizzaz on them captions for thumbnails.
Ma: I believe with CSS transitions, everything is capable of pizzaz!
A penny for every set of thumbnail images you see on a website and you'd soon be very rich.
Captions on hover are smoother and cooler with a touch of animation. With the power of CSS3, we can create transitions that are hardware accelerated and therefore performance-optimised (or way faster!) than anything you can cook up with JavaScript.
I've made a demo page here. The HTML for each demo is an unordered list. Each list element has a thumbnail image and a caption (the caption is wrapped in a div). The caption is hidden by keeping its opacity at 0. On hovering over the thumbnail, the caption is revealed by animating the opacity, as well as other properties to make it look CSS-no JS-cool.
Feel free to use in your projects, commercial or personal. Credit is not required, but a link back is always appreciated.
Notes:
As usual, support for these demos below IE9 is dismal. You will need to add the IE propriety filters for opacity (slightly complex issue: refer here). This will allow the captions (in most cases) to appear on hover, minus the transitions. You will also need to set up a fallback for old IE for the background colour of the thumbnails on hover, which is now using the CSS3 property rgba to provide transparency. I haven't bothered to apply the IE hacks or fallbacks for this demo.
Most importantly, I have used box-sizing: border-box, with appropriate vendor prefixes. This is the only property to which I apply a universal selector in my CSS stylesheets. In this case, it's worth it. I would recommend that everyone read up on this. Saves ample time while designing in the browser, especially for fluid layouts. If you don't use this property, you will need to adjust padding and borders accordingly to get it to look neat.
I have added vendor prefixes, which is the responsible thing to do.
These are images that I clicked in Arambol, Goa in November 2010.
For certain demos, very long captions will not have the desired effect. Keep that in mind.
Works in all browsers, except IE8 and below.