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:

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:

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:

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.

Author: CSS Drive

Using the CSS puesdo class "hover:", this example demonstrates applying a border to any image link when the mouse moves over it. The last definition (".highlightit:hover") is added to overcome a IE bug, which causes the effect to not work in that browser if not added.

The HTML:

The CSS:

.highlightit img{
border: 1px solid #ccc;
}

.highlightit:hover img{
border: 1px solid navy;
}

.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}