Dynamic Drive CSS Library- Highlight image hover effect (opacity or borderize)

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Image CSS: Here

Highlight image hover effect (opacity or borderize)

Author: Dynamic Drive

The first 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 Firefox, "-moz-opacity" (range: 0-1). Both properties are proprietary, and not formally endorsed by the W3C.

Opacity highlight:

The second example demonstrates applying a border to any image link when the mouse moves over it. The last definition (".toggleborder:hover") is added to overcome a IE bug, which causes the effect to not work in that browser if not added.

Border highlight:

The CSS:

Code Info

Rate this code:

Date Posted: 05/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (53)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 6 pages 1 2 3 > Last »

Very nice CSS archive! :)

Posted by sonic on 05/08, 03:09 PM

Firefox actually nowadays support the CSS3 standard "opacity", so there should be no need to use "-moz-opacity" AFAIK, besides for backwards compatibility perhaps.

Not sure about what IE 7 will support here though.

Posted by Jug on 05/11, 04:45 AM

is it just me or this:

.toggleopacity img{
border: 1px solid #ccc;
}

should be this:

.toggleoborder img{
border: 1px solid #ccc;
}

??

Posted by Daniel F on 05/11, 01:01 PM

Cool script, but can I combine it with the Popup Image Viewer? How to do it?

Thank You!

Posted by Israel Viana on 05/12, 08:30 AM

The opacity - heighlight effect is not visible in Safari (ver 2.0.3) and in Opera 6.0.3 for Mac.

Is it only for Firefox? What might be a problem?

Cheers

Mariusz

Posted by Mariusz on 05/14, 09:43 AM

Try this in advance:

.toggleopacity img {
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

.toggleopacity:hover img {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
} 

Posted by Patrick Liu on 05/17, 02:28 AM

The opacity - highlight effect is not visible in IE-6 I used filter and -moz-opacity values as u written above then what is the problem.

Posted by leena on 05/18, 05:50 AM

Great use of the opacity functions. I, however, do not recommend the use of the border highlight since Mariusz says it does not work in Safari.

*I recommend the highlight image hover effect opacity.

*I DO NOT recommend the highlight image hover effect borderize.

Posted by Nathan on 06/02, 01:57 PM

This effect doesnt work in Opera 9

Posted by Terry on 07/24, 10:35 PM

[To: leena]
Poor IE6 only support :hover over anchor

[To: Terry]
Opera 9 should work fine. Could you quote your sample code here?

Posted by Patrick Liu on 09/15, 04:37 AM

Comment Pages 1 of 6 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.