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.

Sat 2nd Apr 2005, 5:29pm GMT

Filed under: Client-side Coding, Hints and Tips, Web

Comments

That's so pretty. I just used it for the website I'm making for my a cappella group. I was trying to do something similiar without using images (instead using text, padding, and changing the background of the text with a:hover), but I'm not very good with CSS. It works a lot better with images anyway. Thanks for the great code! : D

— Matt, 12th Apr, 11:08pm

Comments are now closed for this entry.

Matt Round’s company blog, covering web development, media, technology and pretty much anything else.

Web Sites: Good-looking, effective, accessible sites.
Multimedia: Logos, Flash games, animation and illustration.
Advice: Help with strategy, planning and getting noticed.