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)
I have tried the HTML version as an enter sign for my site. It does not do anything at all, the image is not faded like it shows in the example and does not go into full resolution when hovered on. Is this the proper code or should I use the CSS version? (my page enter site link is given above)
does not work with Safari
If the comment was directed to me, I do not have safari, I have Internet Explorer
In reply 2 Scott Larson:
"Is there a way to do this without linking the picture to anything?"
Maybe u can solve it like this:
test.gif
The example is really great. I was looking for the same css rollover tutorial which will run on the internet explorer, it's working fine.
Thanks
where i must put the css code in page ?? sorry i am new to this !!
i work with ms frontpage
You have one hack to make gray effect on the image(style disabled)?
This doesn't work in Firefox no more. It works in IE 7 fine, but it doesn't work in Firefox 1.5, or 2.
Very cool trick. Had no idea it existed, and i'll deifnitely use it in the future.
I've got this working on my page, but only on one table row. It doesn't like to work if you have multiple table rows.
Anyone know of a way to fix that?
