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)

While highlighting the images can we select the colour of the highlighter? if yes then how?

#1: Yudhir Rai on 09/29 at 12:27 PM

The color of the "highlight" is determined by the original image. Look again at the code. In the normal state, the image is set at an opacity of .5. During a mouseover event, the opacity is set at 1.0. That's the difference.

If you want to change the colors, one way to do it is to create two images, except one is color A and the other is color B. On normal state, display color A; on mousevent display the image with color B.

#2: David on 10/03 at 02:33 AM

Is there a way to do this without linking the picture to anything?

i know in java you can do the onMouseOver command, but i would like to just mouseover an image and have a filter applied to it without linking it to anything.

at last resort i'd just link to "_self"

#3: Scott Larson on 02/21 at 02:08 AM

From what I know Scott. I don't think there is. If you really dont want it to link to anything, in the CSS, you could change the cursor to


so that a hand would not show up but the normal arrow.

#4: Henry on 04/04 at 06:05 PM

Would anyone actually do this?

I would not recommend deviating from the W3C. The browser market is fragmenting these days, with the introduction of Mozilla. This trend may continue even further as mozilla variants crop up, as well as desktops like KDE (with konqueror) become more mature.

It's safest to stick to standards when there's no need to deviate.

What you want to achieve is extremely easy to achieve by just making two fixed images beforehand in an image-editing program...then achieving the desired effect by just switching the images on mouseover.

This gives you a higher degree of control than you would ever have by relying on the end-user's computer to do the graphics transformation. Rule #1: Never give the viewing computer a chance to botch something up that you can do consistently and easily yourself. Rule #2: Never use proprietary extensions!!! Stick with something safe and easy!!!

#5: Alexander Zorach on 04/20 at 11:45 AM

I agree with Alexander's comment, above. One must stick to standards based designs rather than risking it with tricks that are not compatible with majority of the browsers.

#6: Web Designer India on 06/13 at 03:06 PM

This is great. But it isn't running with opera web browser :(

#7: Mustafa on 07/17 at 10:11 AM

how can I do the same thing, but not only with a simple image and with a container let say 'div' with a whole bunch of images, text and other stuff?

#8: lazar on 09/28 at 02:07 PM

what part of the code will you put the overlay code?

#9: Cori on 10/27 at 11:54 AM

how do u choose a pic??

#10: tizel muffin on 12/07 at 04:53 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