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)
While highlighting the images can we select the colour of the highlighter? if yes then how?
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.
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"
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
cursor:default
so that a hand would not show up but the normal arrow.
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!!!
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.
This is great. But it isn't running with opera web browser :(
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?
what part of the code will you put the overlay code?
how do u choose a pic??
