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 3 of 6 pages  <  1 2 3 4 5 >  Last »

I try to use the toggleopacity method that you suggest.
It's works both with IE 7 and Mozilla Firefox 2 (usingf the -moz-opacity property).
But wheh I try to validate the css file (using w3c css validator (http://jigsaw.w3.org/css-validator)
the file result NOT valid with this errors:

attempt to find a semi-colon before the property name. add it
Property progid doesn't exist : DXImageTransform
Parse Error - DXImageTransform.Microsoft.Alpha(opacity=50);
Parse error - Unrecognized : -moz-opacity: 0.5;

The same way using:
filter:alpha(opacity=50); instead of DXImageTransform..
and opacity:0.5 instead of -moz-opacity: 0.5;
(peraphs, with opacity instead -moz-opacity in M.F. the opascity don't change)

So, my question is : it's possible to use this trick and keep my CSS W3C valid ?
Posted by Diego Ferin on 12/13, 11:32 AM
How about hide out the style with conditional comment for IE? for example:

<!--[if gte IE 5]>
...
<!
[endif]--> 
Posted by Patrick Liu on 12/13, 11:50 PM
good script..
so, there is no need two pictures for the effect..
Posted by Salih Toka on 01/03, 04:56 PM
In the words of Peter Griffin, "FREAKIN' SWEET!"
Posted by Greg on 01/08, 04:54 PM
there are so many filters on IE that we could apply on css , as an example:

<style type="text/css">

.
toggleopacity img{
filter
:progid:DXImageTransform.Microsoft.MotionBlur(strength=50);
-
moz-opacity0.5;
}
.toggleopacity:hover img{
filter
:progid:DXImageTransform.Microsoft.MotionBlur(strength=100);
-
moz-opacity1;
}
.toggleopacity img{
border
1px solid #ffffff;
}
  
</style



you could check some other filters and transitions here:
http://msdn.microsoft.com/workshop/author/filter/filters.asp
Posted by wolfwood16 on 01/16, 09:43 AM
I couldn't get the border effect to work in Safari until I changed the order of the tag attributes in the <IMG> tag. I had to put border="0" first, then the "src=" next. Then it worked. Not sure exactly why.

Also I had a margin set in the CSS along with the border changing color. I had to take the margin off in the CSS to work in Safari.
Posted by whitie79 on 01/17, 01:01 PM
thanks, very useful
Posted by Evren on 04/23, 09:36 AM
and how about use Opera?? it's can't work
Posted by ananghd on 05/06, 06:26 AM
How can one apply this effect to an image map. For example, I have a group photo that contains an image map. When I hover over a person's head I want it to highlight a border around the head - thus indicating that this is a link. Otherwise it may be hard to determine that there is an image map and also hard to determine who one is highlighting.
Posted by Steve Field on 05/15, 02:49 PM
Seems not to be working in IE 7
Posted by Tracey on 05/15, 03:59 PM

Comment Pages 3 of 6 pages  <  1 2 3 4 5 >  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.