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)

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)

#1: Holly on 12/20 at 09:08 PM

does not work with Safari

#2: martin callanan on 12/21 at 05:51 PM

If the comment was directed to me, I do not have safari, I have Internet Explorer

#3: Holly on 12/21 at 10:14 PM

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:

#4: Free Bee on 03/27 at 10:49 AM

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.


#5: Web Designer India on 05/17 at 06:05 PM

where i must put the css code in page ?? sorry i am new to this !!
i work with ms frontpage

#6: giorgos on 06/07 at 03:45 PM

You have one hack to make gray effect on the image(style disabled)?

#7: Diego Tolentino on 08/15 at 06:04 PM

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.

#8: bubazoo on 10/29 at 08:07 PM

Very cool trick. Had no idea it existed, and i'll deifnitely use it in the future.

#9: Shycon Design on 11/21 at 10:00 PM

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?

#10: Suetan on 01/08 at 03:33 PM
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