CSS - Change image by hovering, just like this !

Plz take a look at this link: a sample site

at the bottom u see wordpress and jooml开发者_开发技巧a icons, when u hover on it by mouse, it seems gray icons get colored. This is just one picture (series of images - thx to my love, Firebug !) and if i'm right it's method of background positioning. Where can i find a good resource to learn it? I already can do that by coding in CSS (but with two images, one for "a" and one for "a:hover" tags). Thanks

It's called a sprite:

Google uses one too, as it reduces the size of the served content:

To make it work properly, you clip the background image so that only a little part shows:

#foo
{
  background-image: url('bar.png');
  background-position: 0px 0px;
}

And on :hover, you shift it over a bit:

#foo:hover
{
  background-position: 70px 0px;
}

As piskvor mentions this technique is often termed "CSS sprites":

div {
    background-image:<url-to-image>;
    background-position:0px 0px;
}

div:hover {
    background-image:<url-to-image>;
    background-position:0px 50px;
}

The trick is to have an image with both states in it. Then make the div just large enough for only one of the states. On :hover you change which portion of the image is visible by altering the background-position value.