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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

Cool script, i have one that works exactly the same, although im i search for something that validates against http://jigsaw.w3.org/css-validator/.

=[

Posted by Tom on 07/24, 08:32 AM

This does nothing in Opera 9.51 build 10081

Posted by badotz on 08/28, 05:41 AM

Doesn't work on Google's new browser "Chrome" either.

Posted by Joe on 09/23, 08:37 AM

that's nice, a lot better than the javascript rollover!

Posted by matt on 10/21, 10:51 PM

Can't get better than this ! :) Worked like charm , many many Thanks !

Posted by Sunny on 11/20, 05:16 AM

cool... i like the effect.

Posted by Rahul on 12/09, 11:49 PM

Awesome code, been looking for feature for ages, nice and simple! Love it.

Posted by GazTruman on 02/09, 03:52 PM

Hello,

How could I get the image to get lighter instead of get darker?

Thank you!

Posted by Joe on 02/28, 11:07 PM

HI, I have a similar problem, I'm trying to highlight text, when rolling over an image, I used to use img files and swap behaviors, but would like to use css.
For example when rolling over an image on my page, I would like the text underneath it to highlight, is this possible?
thanks very much!

Posted by karla on 03/03, 06:57 PM

thanks this worked great. just what I was looking for

Posted by MJ on 04/13, 07:53 PM

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

Commenting is not available in this weblog entry.