CSS だけでフォトギャラリーのサンプル

この文書は、Lucky bag::blog のエントリー「CSS だけでフォトギャラリー」のサンプルです。

サムネール画像にマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。Opera と Safari では拡大画像が固定されない。

横 350px 縦 280px の画像を使用。サムネール画像は CSS で横 35px 縦 28px に設定。

CSS コード

/*---- ギャラリー ----*/
#gallery {
  width: 385px; /* サムネール画像と拡大画像を足した幅 */
  height: 280px;
  list-style-type: none;
  position: relative; /* 子要素の位置を absolute させるために指定 */
  background: #dfb;
}
      #gallery a img {
        width: 35px; /* サムネール用に縮小 */
        height: 28px; /* サムネール用に縮小 */
        border: none;
        position: relative; /* z-index を指定するため */
        z-index: 3; /* 常に最前面のレイヤーへ表示 */
      }
  #gallery li {
    width: 35px;
    height: 28px;
    background: #ffa905 url(click.png) top left no-repeat; /* マウスオーバーやクリック時に現れる背景画像 */
    z-index: 3; /* 常に最前面のレイヤーへ表示 */
    font-size: 0; /* IE 用に指定（http://cssbug.at.infoseek.co.jp/detail/winie/b100.html を参照） */
    line-height: 0; /* 同上 */
    vertical-align: bottom; /* 同上 */
  }
    #gallery a {
      display: block;
      width: 35px;
      height: 28px;
      position:relative; /* z-index を指定するため */
      z-index: 3; /* 最前面のレイヤーへ表示 */
    }
    #gallery a:hover {
      width: 350px; /* マウスオーバーで画像拡大 */
      height: 280px; /* マウスオーバーで画像拡大 */
      padding-left: 35px; /* 左のサムネール分余白をとる */
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2; /* レイヤー階層をひとつ下に落とす */
    }
      #gallery a:hover img {
        width: 350px; /* マウスオーバーで画像拡大 */
        height: 280px; /* マウスオーバーで画像拡大 */
        position: relative; /* z-index を指定するため */
        z-index: 2; /* レイヤー階層をひとつ下に落とす */
      }
    #gallery a:active,
    #gallery a:focus {
      width: 350px;
      height: 280px;
      padding-left: 35px; /* 左のサムネール分余白をとる */
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1; /* レイヤー階層を更にひとつ下に落とす */
    }
      #gallery a:active img,
      #gallery a:focus img {
        width: 350px;
        height: 280px;
        position: relative; /* z-index を指定するため */
        z-index: 1; /* レイヤー階層を更にひとつ下に落とす */
      }

/*---- ギャラリー END ----*/