How to use CSS Sprites.

I am not a web designer but i needed to show a before and after state for my restoration images. I had originally started with 2 images 'before' and 'after' side by side. This achieved the goal but didn't really give any wow factor.

I then tried a roll-over technique where holding the mouse over the image loads up a different one. But that meant the second image didn't load until the mouse was placed over it.

The solution was to use a CSS  sprite. This loads just one image made up of the before and after images. The clever bit is that the code only displays one half of the image. When the mouse is moved over it it shifts the image's position on the page to show the other half. But as it is still ALL one image it doesn't require any time to load it. Instant before and after states. Below is the original image and the CSS code I used. You can see the final result on the restoration page

You can see the final result on the restoration page

<-!
<center><style>#BIKE
{
  display: block;
  width: 215px;
  height: 300px;
  background: Url(http://www.pixelfix.co.nz/resources/Bikesprite.jpg) no-repeat 0px 0px; 
border-style:solid;
border-width:7px;
border-color:#FFFFFF;
}

#BIKE:hover
{ 
  background-position: -215px 0px;
}

#BIKE span
{
  display: none;
    }
</style>
<a id="BIKE" href="#" title="BIKE"><span>BIKE</span></a></center>


​->