Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.