サムネイル画像をオンマウスで拡大する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="***" /></a> 文章 </p>
※href, src, width, height, alt の値は、使用する画像に準じます。
CSS
a.thumbnail { display: block; float: left; margin: 0.3em 10px 0.3em 0; } a.thumbnail img{ position: absolute; } a.thumbnail, a.thumbnail img{ width: 100px; height: 100px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }
※width, height の値でサムネイルのサイズを指定します。また、利用しているレンタルブログなどで"thumbnail"がクラスとして既に使われている場合は、他の適当な名前に変更してください。
単純な CSS ですが、ブログなどに挿入する画像のちょっとした味付けとして効果的だと思います。
- 前の記事:
- レンタルサーバーの軽さを保つ
- 次の記事:
- 意外な取り合わせ