Highlighting thumbnails using transparency

I recently figured out a nice and simple technique to create a nifty highlighting effect on thumbnails for your image gallery. This article will provide you with all the necessary information on how to successfully implement it across all major browsers, including Internet Explorer 6.

The goal

As said, the idea is to create a really simple thumbnail gallery with a nifty highlighting effect. We will use only html and css (no javascript) and make sure that it works in all major browsers.

The HTML

The thumbnail gallery will be built using a list for semantic reasons. On top of that, we wrap the list with a div that will act as a container. If you wonder why we add the extra div-wrapper instead of just adding the thumbnail class to the ul, check out this article by Onderhond. I don't think the link and image tags need more explanation here. We can of course add a title attribute to our a-elements for improved accessibility. Also, add as many list items as you wish.

The CSS

	.thumbnails ul li {display:block; float:left; padding:0px 10px 10px 0px;}
	.thumbnails ul li a {background:#FFFFFF; display:block;}
	.thumbnails ul li a img {opacity:0.9;}
	.thumbnails ul li a:hover img {opacity:1;}

We will quickly explain the css code above. We float the list items to the left and give them a bit of padding. Next, we set the display property of our links to block. Our gallery will now become a nice little grid, assuming that all thumbnails have the same dimensions.

To achieve the highlighting effect, we will give our image a solid white background and a little bit of transparency using the widely implemented css3 opacity property. On the hover pseudo-class, we will reset the opacity to its default value to achieve the nifty hover-effect.

The compatibility

Most major browsers already support the opacity property. Of course, the ugly duckling of the browser market (yes, I mean Internet Explorer 6) doesn't have support for opacity. Luckily, we can use an IE-only filter to set the opacity. I suggest keeping the css below in a separate stylesheet for IE6 and include it using conditional comments.

	.thumbnails ul li {display:inline;}
	.thumbnails ul li a img {filter:alpha(opacity=90);}
	.thumbnails ul li a:hover img {filter:alpha(opacity=100);}

The result

When all the code is in place, the result should be somewhat like this example page. Have fun with your new nifty hover effect!