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:
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 »
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>
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>