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 3 of 6 pages < 1 2 3 4 5 > Last »
<!--[if gte IE 5]>
...
<![endif]-->
so, there is no need two pictures for the effect..
<style type="text/css">
.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50);
-moz-opacity: 0.5;
}
.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=100);
-moz-opacity: 1;
}
.toggleopacity img{
border: 1px solid #ffffff;
}
</style>
you could check some other filters and transitions here:
http://msdn.microsoft.com/workshop/author/filter/filters.asp
Also I had a margin set in the CSS along with the border changing color. I had to take the margin off in the CSS to work in Safari.
It's works both with IE 7 and Mozilla Firefox 2 (usingf the -moz-opacity property).
But wheh I try to validate the css file (using w3c css validator (http://jigsaw.w3.org/css-validator)
the file result NOT valid with this errors:
attempt to find a semi-colon before the property name. add it
Property progid doesn't exist : DXImageTransform
Parse Error - DXImageTransform.Microsoft.Alpha(opacity=50);
Parse error - Unrecognized : -moz-opacity: 0.5;
The same way using:
filter:alpha(opacity=50); instead of DXImageTransform..
and opacity:0.5 instead of -moz-opacity: 0.5;
(peraphs, with opacity instead -moz-opacity in M.F. the opascity don't change)
So, my question is : it's possible to use this trick and keep my CSS W3C valid ?