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

Just great :)

Works for me in FF3 and IE6
Posted by Wojtek on 04/18, 04:59 AM
I think I got some result. Thank you here.
Posted by Think Flick on 06/02, 11:29 PM

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


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.