CSS Image Values and Replaced Content Module level 3
も草案が進んでいるようです。背景のグラデーションのために画像をつくる、というようなことが不要になっていくのは、コーディングで数値化されるということや、スタイル内で定義ができてしまうという部分では省力化できますが、もしかしたら「画像制作」でこれらをこなす感覚のままだと（というかパラメータに弱い人）シキイが高くなるのかもしれません。
table→cssという流れに戸惑いがあった、というのとは少し違う移行の壁がある領域かもしれないですね。（それをいったらgifアニメからcssアニメというのも同じようなものかもしれませんが…）

ミツエーリンクスで日本語訳版が公開されています。

http://standards.mitsue.co.jp/resources/w3c/TR/css3-background/

サムネイル上に存在する画像は3点。リンク先は共通でギャラリーページ、というような想定で。

HTML
<div class=”slide” id=”person_a”>
<ul>
<li><a href=”galelly.html” class=”ph1″>
<img src=”images/blank.png” width=”60″ height=”122″></a></li>
<li><a href=”galelly.html” class=”ph2″>
<img src=”images/blank.png” width=”60″ height=”122″></a></li>
<li><a href=”galelly.html” class=”ph3″>
<img src=”images/blank.png” width=”60″ height=”122″></a></li>
</ul>
</div>

というようにclassの異なるliに、透明画像を並べます。
透明画像のwidthは「表示エリア/表示画像数」（上の例の場合はwidth180の画像を3つ、ということで180/3=60）。もっとも、cssでこのimgは非表示にしてしまうのでcssが効いている限り適当でも問題ありませんが。css無効時をフォローするならば、このimgのaltは適切にリンク先を説明するようにしておくか、表示させたい画像を指定しておいたほうが良いはずです（今回はそこは割愛）。

CSS
.slide li a img,.slide li a img:visited { display:none; }
.slide li { display:block; width:60px; height:120px; float:left; position:relative;}
.slide li a,.slide li a:visited { position:absolute; display:block; height:122px; width:60px; border:none;}
.slide ul { width:180px; height:122px; }
.slide li a.ph1 { width:60px; z-index:100;}
.slide li a.ph2 { width:60px; z-index:99;}
.slide li a.ph3 { width:60px; z-index:98;}
.slide li a.ph1:hover { top:0; left:0; width:180px; }
.slide li a.ph2:hover { top:0; left:-60px; width:180px;}
.slide li a.ph3:hover { top:0; left:-120px; width:180px;}
#person_a ul { background:url(../images/slide_a.png) no-repeat 0 0; }
#person_a li a.ph1:hover { background:url(../images/slide_a.png) no-repeat 0 0; z-index:96; }
#person_a li a.ph2:hover { background:url(../images/slide_b.png) no-repeat 0 0; z-index:97; }
#person_a li a.ph3:hover { background:url(../images/slide_c.png) no-repeat 0 0; }

画像そのものがコントローラー（マウスオーバーの対象）になるので、
1.マウスオーバー領域になるように、liをdisplay:block,float:leftで横並びさせる
2.liの中いっぱいになるようにaもdisplay:blockで指定
3.マウスオーバー時のみ、背景に画像を表示させる。positionで位置調整をする（やらないと、表示位置がずれる）
4.その際に他のliタグ内のaを殺さないようにz-indexで後ろに移動
5.hover時以外のaタグはz-indexで並び順を左の方が前にある状態に並べる。
ということをやっています。
これで右→左、左→右という動作で画像がぱらぱらと切り替わりiPhoto風に。
何となく一昔（二昔？）前はこういうの実現するのにjavascript一生懸命使っていたような気がしますね…