CSS Examples Highlight Image onMouseover (Opacity)

Date: 09/21/2004 Highlight Image onMouseover (Opacity)

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:

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)

You don't really have to link the pics to anything. I used this style for < span > and it works just fine :)

#1: petrOlly on 10/02 at 01:50 PM

is there a way to do this with valid css?

214 .highlightit img Parse Error - opacity=50)
215 .highlightit img Property -moz-opacity doesn't exist : 0.5
219 .highlightit:hover img Parse Error - opacity=100)
220 .highlightit:hover img Property -moz-opacity doesn't exist : 1

#2: dennis on 10/05 at 12:27 AM

Thanks a lot for this. I am using it for my clients site. Too bad it wont validate. But great job

#3: Mirza on 12/25 at 02:28 AM

good sharing thansk

http://www.artiajans.net

#4: arti ajans domain on 04/08 at 10:27 AM

please look this my job, as a problem.. :S
http://www.inadinagul.com
Forum

#5: CPX on 05/25 at 01:06 AM

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm

#6: dos komut on 06/20 at 09:55 AM