CSS Examples Highlight Image onMouseover (Opacity)

Author: CSS Drive

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/" class="highlightit"><img border="0" src="test.gif"></a>
<a href="http://www.google.com/" class="highlightit"><img border="0" src="test.jpg"></a>

The CSS:

.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

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

Comments (26)