Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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
Copyright 2006-2016 Dynamic Drive