■サムネイル(縮小画像)にマウスオーバーすると、画像がその位置で自動拡大します。
■最後の画像だけ、拡大画像をクリックすると、さらに大きな画像(横800px縦600px)に飛びます。
↑↑■上記が使用画像の実寸の大きさです。横幅267px縦幅200px。
JavaScriptを全く使用していません。CSSだけの自動拡大のサムネイル・スライドです。
リアルでだんだん拡大し、縮小していく動作がとても面白いです。
最新ブラウザなら面倒な接頭語(ベンダープレフィックス)は不要のCSS使用なので、記述も簡単です。
実はサムネイル画像は画像実寸でもいいのですが、それだと拡大画像がちょっとボヤけるかもと思って、実寸より小さくしました。
見本の使用画像実寸は横幅267px縦幅200px。サムネイルと拡大の中間の大きさです。
サムネイルでは、height:100px;の指定を入れて、実寸より小さく表示しています。
拡大画像は２倍指定にすれば実寸表示になるのですが、大きく変化を付けたいので、３倍指定にしました。
拡大画像は heightが300px表示になり、実寸より1.5倍の大きさになります。
このあたりは、自分の好みで指定して下さい。
注意することは、画像の指定サイズと画像同士の間隔です。
拡大画像が大き過ぎて、サムネイルを完全に隠してしまうと、他の画像のマウスオーバーができなくなるので、全部のマウスオーバーが可能になるように調整して下さい。
なお最後の画像だけ、さらに大きな拡大画像（別画像）へのリンク見本が付けてあります。
他の画像にも付けてもいいですし、不要なら削除して下さい。
このCSSの参考は9ineBBから。
■マウスオーバーで拡大＆左右回転するJavaScriptはこちら→ スライドショー３３■面白２■超簡単CSSで拡大回転サムネイル