CSS Examples Highlight Image onMouseover (Opacity)

Date: 09/21/2004 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.


<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{
-moz-opacity: 0.5;
opacity: 0.5;

.highlightit:hover img{
-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


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

please look this my job, as a problem.. :S

#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
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site