Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

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.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.