hoverのバリエーション

css-cheet/hover-with-big-image at master · shigemk2/css-cheet · GitHub

こんな感じの画像を用意し、

CSSで、
「通常時は左半分、ホバー時は右半分のみを表示させる」ように出来る。

CSSはこのように書いたらいいね。

div.container a{
    display: block;
    width: 50px;
    height: 100px;
    background: url(../img/hover-with-big-image.png) no-repeat;
}
div.container a:hover {
    background-position-x: -50px;
}