[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列以上にすると、ホバーできない箇所があるのでご注意。