ボタンホバー時にバックグラウンド画像の表示部分を変更する

Question

１枚の画像で表示する部分を変更する方法ご教授お願いします。

↓のような、左側に猫、右側に虎が書かれている１枚の画像があります。
[猫][虎]

通常は猫の部分を表示させておいて（虎の部分は隠れてる）、ホバーした時に虎の部分（猫の部分は隠れてる）を表示させたい。

Answer 1

CSSスプライトでググると色々サンプルが出てきます。
background-positionプロパティを使っている例が多いですね。
少し違いますがclipプロパティでも似たようなことができると思います。

#an-image {
  background-image: url(/static/img/hoge.png);
  display: block;
  width:  50px;
  height: 50px;
  background-position: top left;
}
#an-image:hover {
  background-position: top right;
}

Answer 2

JSFiddle
外枠をoverflow:hidden;にしておいてpositionの絶対配置でずらすっていう手もありますね。
上記リンクの例では切り替えるものを背景を使って表現してますが、<img>でも問題ありません。