Question

There was a great effect I’ve seen back in the day and now I can’t find anything about it.

The concept is that there is an image with both the normal and onHover appearance combined into one image. On hover the image would shift and show the onHover appearance.

Here’s a visual example:

I’m pretty sure it has this sort of code involved:

<img id="button" src="img.png" width="100" height="50">

onHover:
document.getElementById("button").top = "-50";

Answer 1

CSS:

#button {
    background-image:url('img.png');
    background-position: 0 0;
}

#button:hover {
    background-position: 0 -50px;
}