Simple CSS image mouse over
This is a quick and easy way to get a nice image mouse over effect using only one image, some CSS, and without resorting to any javascript.
The real trick is in the preparation of the image.
Open Photoshop, or whatever tool it is that your prefer, and create a new file. To keep things simple, I’m just going to draw out a quick shape on a 100 x 100px canvas. Make sure that you draw your shape on a new layer.
You can go ahead and delete your Background layer.
Next, rasterize your shape and select it’s mask (Ctrl + click on the layer in Photoshop).
Invert the selection so that you now have the transparent surrounding area selected. From the Select menu, shoose Modify > Contract. The value by which you choose to contract the selection will be the thickness of the mouseover highlight.
Fill the selected area with the color of your website background, in my case, white. You should end up with a logo that has a thin transparent outline against a solid background.
Save your image as .gif or .png in order to preserve the transparency.
Now, onto the code
This is the easy part. We are only going to make one class to control the mouse over effect. First, however, add the HTML for your image link (you could always use a span, etc instead of a link, I’m just demonstrating it this way as I would imagine that a link would be the most typical application for this trick):
<a href="target.html" class="highlight"><img src="yourimage.png"></a>
Now, for the CSS:
.highlight img{
border:0;
}
.highlight img:hover{
background-color:#ff6c00;
}
That’s it! Your result should look like this.
You can get creative with the shape and size of the transparent section in your image; there’s absolutely nothing saying that it has to be a solid continuous outline. Have fun!
Update: I just realized that this doesn’t work in IE8 Beta… not sure about 6 or 7. Firefox and Chrome are fine, though… I’ll adjust it to be compatible with IE8 (and likely 6 & 7) later tonight.
Another Update: Nope, it’s not just IE8; This won’t work in any version of Internet Explorer. Just another example of their refusal to adhere to the standards.
