サムネイル画像をオンマウスで拡大するCSS - トーンコントロール

スタイルシートでお手軽に CSS は、レイアウトの為だけではなく、工夫しだいでさまざまな事に利用できます。中には Cross browser CSS slide show のように CSS だけでイメージギャラリーを実現した複雑で高度なものも！ しかし、もっとシンプルに画像を扱いたい場合も多いので、このページでは、画像をサムネイルに縮小して、オンマウスで元のサイズに戻すごく簡単な CSS のサンプルを掲載します。 左のサムネイル画像にマウスカーソルを重ねると元のサイズで表示されます。JavaScript を使わずに下記のような (X)HTML と CSS だけで実装しているので手軽に導入できます。 HTML <p> <a class="thumbnail" href="***.jpg"><img src="***.jpg" width="***" height="***" alt="***