Applying border & opacity to images onMouseover in CSS
In this tutorial, I'll show you how to use CSS alone to reproduce two
popular image effects that have traditionally been done using scripting. The
advantage of looking to CSS instead is obvious- much more lightweight and
easier to implement. The two effects in question are:
| border onMouseover
 |
|
opacity onMouseover
|
For cross browser compatibility (IE5+, FF1+), the image needs to be
hyperlinked in order for the CSS to work, as IE (as of IE6) only supports
the ":hover" pseudo class on A elements. Lets now look at the CSS code for
each of the two effects separately.
 Applying
border onMouseover to images
First up, the CSS technique for applying a border to image links
onMouseover:
<style type="text/css">
.borderit img{
border: 1px solid #ccc;
}
.borderit:hover img{
border: 1px solid navy;
}
.borderit:hover{
color: red; /* irrelevant definition to overcome IE bug */
}
</style>
<a href="http://cnn.com" class="borderit"><img border="0" src="email.gif" /></a>
By using the CSS pseudo class ":hover", we apply the enclosed CSS
definitions to only when the mouse moves over any image with
class="borderit". The last definition (".borderit:hover") is irrelevant, and
only used to overcome a IE bug whereby if not present would disable the
border effect in IE.
Applying
opacity onMouseover to images
Moving on, here's the CSS code for manipulating an image's opacity
onMouseover:
<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>
<a href="http://cnn.com" class="opacityit"><img border="0" src="email.gif" /></a>
Note the two different properties used to specify opacity in CSS. In IE
5.5+, the "filter" property is used (range: 0-100), and in Mozilla/NS6+,
"-moz-opacity" (range: 0-1). Both properties are proprietary, and not
formally endorsed by the W3C.
|
