これ、使えそうなので、メモ。
元ネタは、こちら
CSS Sprites w/out Using Background Images
背景画像を使わずにimg要素で呼び出した画像をCSSスプライトとして呼び出すテクニック。
<div>
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>
使用されている画像は、カーソルを合わせなかった時、合わせた時の画像を一枚にしている状態。

背景画像を位置変更ではなくoverflow:hidden;にしている。
コントロールは、margin-topで制御している。
.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
}
このテクニックを使う条件として、正確な画像の縦、横のサイズが分かることが必要で、hoverには、margin-topを使っている。
この記事でCSS3のtransitionを使ってアニメーション効果を出すテクニックも記載されている。
.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;
}
どこかで使えそうなテクニックだよね。。。