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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 4 of 6 pages « First < 2 3 4 5 6 >

this effect doesnt work with internet.explorer because microsoft did not update their css library for custom css tag's. blame microsoft..it works perfect in Opera/FirefoX/Safari

Posted by Victor on 06/17, 08:11 PM

oww what a shame.. yes alot of css tags work in firefox but IE has a lack of it.. hope microsoft fixes their rendering with IE

Posted by Michiel on 06/17, 08:19 PM

I use the effect, but I have only one problem, when you put your mouse over an image the text without that div will change the opacity into normal, before that text have effect on his own, and he is transparent, does anyone know why???
if know please send me mail on office@milanvasic.com

Posted by Milan Vasic on 06/29, 07:54 AM

Thanks! Work for me!

Posted by Felipe Gomez on 07/08, 05:15 PM

I love the codes for the opacity and border, but whenever I run it through the css validation, I come up with 6 errors:

47 .toggleopacity img Parse Error - opacity=50)

48 .toggleopacity img Property -moz-opacity doesn't exist : 0.5

49 .toggleopacity img Property opacity doesn't exist : 0.5

53 .toggleopacity:hover img Parse Error - opacity=100)

54 .toggleopacity:hover img Property -moz-opacity doesn't exist : 1

55 .toggleopacity:hover img Property opacity doesn't exist : 1

How can I get rid of these errors?

Posted by Kristine on 08/01, 11:53 AM

Patrick Liu's css code got rid of the border in the original toggleopacity - no time to see ewhat the difference was, but thanks!

Posted by GreatScott! on 09/19, 03:38 AM

Cool code. Works well for me. IE7 works without any problems as well.

Posted by Paul on 01/21, 09:07 AM

its fantastic u can use where ever you want....
Nice one do well!!ahaha!!

Posted by Shop design on 04/22, 12:32 AM

Yeps IE 7 dont work with css original script on change color on first button, but with

<code>
.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity:0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity:1;
}

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

.toggleborder:hover img{
border: 1px solid #006699;
}
<code>

work just fine!!!
I use this on my site www.legendofmir.ro

Posted by DOOMNEZEU on 05/09, 11:10 AM

Does it work wih an imap? [image map]
I have a layout picture I want to imap.. and if I imap it very precisely, will it work on the imap links?

Posted by Someone on 05/13, 12:23 PM

Comment Pages 4 of 6 pages « First < 2 3 4 5 6 >

Commenting is not available in this weblog entry.