Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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

does this work only for img only? this doesn't seem to work on other types of links.
Posted by Bob on 10/03, 02:00 AM
[To: Bob]
If you want to apply opacity filter on text links, I think it should work this way:
.toggleopacity span {...}
  
.toggleopacity:hover span {...

And make the hyperlink like this:
<a href="#" class="toggleopacity"><span>Link</span></a
Posted by Patrick Liu on 10/03, 03:51 AM
Well this is quite nice yet it does not validate. CSS test will mourn about several things like DXTransform because it is non standard CSS. Any ideas how to get this working as valid CSS?
Posted by Frank on 10/17, 10:39 AM
IE6 is a buggy SOG. The border works some of the time. The opacity trick is pretty cool though.
Posted by joeblow on 10/17, 06:59 PM
For some reason, the imag border is not working for me.
Posted by cardnexus on 10/20, 09:45 PM
Very nice effect, thanx for sharing.
Posted by Sajid Iqbal on 10/25, 01:59 AM
Hi,

I tried getting the image border for my images, but in IE it did not work. Its working in FF and Netscape 8+. Below is the code I have done. Please correct it and send it to me if there is anything wrong.

===================================
CSS
===================================
.thumbnail:link img {
border: 1px solid #DC7B48;
}
.thumbnail:link {
color: #DC7B48;
}
.thumbnail:hover img {
border: 1px solid #000000;
}
.thumbnail:hover {
color: #000000;
}

===================================
HTML
===================================
<div id="woodpecker_content">
[url="#" class="thumbnail"]
assets/images/common/tn_camera.gif
[/url]
Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here.
</div>
Posted by Joseph Bastin on 11/10, 06:12 AM
Yes Frank you are right! Has anyone managed to validate DXTransform function as WC3 standard? How to do it?
Posted by janobar on 11/22, 07:06 PM
how do i get the script to work inside tables
Posted by Ryan on 11/30, 08:30 AM
Sweet effect. Makes for a slick page.
Posted by Chip on 12/02, 11:49 PM

Comment Pages 2 of 6 pages  <  1 2 3 4 >  Last »


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