Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

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.


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.