Applying opacity onMouseover to images

Moving on, here's the CSS code for manipulating an image's opacity onMouseover:

<header>
<style type="text/css">

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

</style>
</header>


Note the two different properties used to specify opacity in CSS. 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.


<body>
<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>
</body>

Close