Highlight Image onMouseover
This example changes the opacity of any image link when the mouse moves over it using the “hover:” pseudo class of CSS. Note the two different properties used to specify opacity in CSS below. In IE 5.5+, the “filter” property is used (range: 0-100), and in Mozilla/NS6+, “-moz-opacity” (range: 0-1). Both properties are proprietary, and not formally endorsed by the W3C.
The HTML:
<a href=”http://www.cssdrive.com/”><img border=”0″ src=”test.gif”></a>
<a href=”http://www.google.com/”><img border=”0″ src=”test.jpg”></a>
The CSS:
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
http://www.cssdrive.com/index.php/examples/exampleitem/highlight_image_opacity/