Wednesday, May 25, 2011

image hover "swap" without javascript

I was working on a splash page for Fiona's site and she wanted an image to change when you hovered over it.

This is easy enough to do with normal links using css.  You just change the background color or image using
a:link, a:hover, or a:visited {}
so the background behind the link changes.

But if you want one image to switch to another it is not quite as easy.  Eventually, I found the best technique is to put an image into your HTML with a link around it.  And then in CSS put in a background image directly behind your html image.  You can then use the following CSS code to hide your HTML image thus reviling your background image.
Here is a link which explains it in better detail
http://brassblogs.com/blog/css-image-swap

and here is where I used it myself
 http://www.snoweventdesign.com

No comments:

Post a Comment