02 Apr 2005

Finishing Touches: Opacity Rollovers

Images within links in this site (e.g. in the navigation bars) become translucent when rolled-over. It’s a simple effect that needs no extra images or JavaScript, just a bit of CSS:

a:link img, a:visited img
{
	/* seems to prevent flickering in Mozilla-based browsers */
	opacity:0.999;
}
a:active img, a:hover img, a:focus img
{
	/* for Mozilla/Firefox/Safari */
	opacity:0.6;
	/* IE5.5 upwards */
	filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=60);
}

Adjust the 0.6/60 values to vary the effect. The opacity property is part of CSS3. The Alpha filter is an IE-only feature which also allows opacity gradients.