[CSS]スタイルシートで実装するLightbox風エフェクト -CSS Light Box
拡大した画像を表示するLightbox風エフェクトを実装するスタイルシートをCSS playから紹介します。
CSS Light Box -click version
demo
デモでは各サムネイルの画像をクリックするとLightboxのように拡大した画像を表示し、右下の×アイコンをクリックすると元の画面に戻ります。
対応ブラウザは、IE6を含む主要なブラウザ全てとなっており、IE6対策にexpressionが使用されています。
CSS Light Boxのトリガーはクリック以外にも、ホバー対応バージョンもあります。
CSS Light Box -hover version
2列以上にすると、ホバーできない箇所があるのでご注意。
Post on:2009年3月7日
