[CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート

Lightboxなどのスクリプトを使用しないで、スタイルシートで実装する画像を拡大するテクニックをCSSplayから紹介します。

CSS play - 'Clickbox'
demo

デモではギャラリー風に配置された各画像をクリックすると、下記のように拡大画像が表示されます。

画像を拡大表示

拡大画像を消すのは、右上のアイコンです。

仕組みは簡単に説明すると、サムネイル画像と拡大画像（テキスト含む）をインライン要素として配置し、focusとactive時にdisplayやpositionなどを変更しています。

対応ブラウザは、Safari(PC), Google Chromeとのことですが、上記キャプチャはFirefox3.5です。
IE6でも動作するバージョンは「CSS Light Box - Click version」です。

このテクニックは画像ギャラリーだけでなく、商品写真の拡大などにも応用がきくものとなっています。

Using - 'Clickbox'

商品写真をクリックすると、拡大します。

画像を拡大表示