三角形のキャプションがスライドインするイメージギャラリー

公開：2011年10月17日 16:09
更新：2012年01月06日 11:58

『Wixel』を見ていて、ナビゲーションの見せ方が面白いなーと思ったので、CSS Transitionsを使ってギャラリーに応用してみました。
まあ練習にはなったかなと思いますｗ

どうでもいいですが写真は自分で撮ったものです。
もっと見たい方は「34 Photos @ 旧古河庭園 :: mlog」をどうぞ。

まずはHTMLから。
aの中にdivが入ってます。これが気持ち悪い場合には違う方法も取れますが、それについては後で書きます。

<ul class="gallery">
  <li>
    <a href="#">
      <img src="images/01.jpg" width="200" height="200" alt="" />
      <div class="caption"><span>洋館</span></div>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="images/02.jpg" width="200" height="200" alt="" />
      <div class="caption"><span>洋館横のバラ園</span></div>
    </a>
  </li>
  ...
</ul>

改めて見るとアレな感じですが、もっといい方法があるかと思います。
次はCSSを。いつも通りあんまり関係ない部分とベンダープレフィックスは除いてあります。

html, body, h1, ul, li, img, a {
  margin : 0;
  padding: 0;
  border : 0;
}

.gallery {
  margin     : 30px auto;
  padding-top: 1px;
  width      : 805px;
  background : #fff;
  box-shadow : 0 0 5px rgba(0, 0, 0, 0.4);
  list-style : none;
}

.gallery:after {
  clear  : both;
  display: block;
  content: "";
}

.gallery li {
  float   : left;
  margin  : 0 0 1px 1px;
  width   : 200px;
  height  : 200px;
  overflow: hidden;
}

.gallery a {
  display        : block;
  position       : relative;
  width          : 100%;
  height         : 100%;
  text-decoration: none;
}

.caption {
  position        : absolute;
  left            : 0;
  top             : 0;
  z-index         : 99;
  width           : 100%;
  height          : 100%;
  background      : linear-gradient(
                      left bottom,
                      rgba(0, 0, 0, 0.6),
                      rgba(0, 0, 0, 0.6) 50%,
                      transparent 50%,
                      transparent
                    );
  color           : #e0e0e0;
  transform-origin: right bottom;
  transform       : rotate(-45deg);
  transition      : all 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  opacity         : 0;
}

.gallery a:hover > .caption {
  transform: rotate(0deg);
  opacity  : 1;
}

.caption > span {
  position   : absolute;
  left       : 10px;
  bottom     : 10px;
  font-size  : 16px;
  text-shadow: -1px -1px 0 #000;
}

ポイントはキャプションをtransform: rotate(-45deg)して、最初は見えないようにすること。その際、基準はボックスの右下に。
ついでに不透明度もゼロに。
それをtransitionで元の角度（ゼロ）に戻しつつ、不透明度を1に。
cubic-bezier()はジェネレータで作りました。三角っぽい背景は、左下から右上へのグラデーションで。

そんなに難しいことはしてないです。

キャプションのdivをaの外に出す場合。

デモページ 2

HTMLはこんな感じになります。

<ul class="gallery">
  <li>
    <a href="#">
      <img src="images/01.jpg" width="200" height="200" alt="" />
    </a>
    <div class="caption"><span>洋館</span></div>
  </li>
  ...
</ul>

CSSはこう。


.gallery li {
  float   : left;
  position: relative; /* 追加 */
  margin  : 0 0 1px 1px;
  width   : 200px;
  height  : 200px;
  overflow: hidden;
}

.gallery a {
  display        : block;
  position       : relative; /* 削除 */
  width          : 100%;
  height         : 100%;
  text-decoration: none;
}

.caption {
  /* ここまでは同じです */
  pointer-events: none; /* これを追加 */
}

.gallery a:hover + .caption { /* セレクタが違います。'~'でも大丈夫 */
  transform: rotate(0deg);
  opacity  : 1;
}

.caption > span {
  /* ここは同じ */
}

まず必要なのはposition: relativeの指定要素の変更です。
次にホバー時のセレクタを子要素から隣接セレクタにします。
そして重要なのがキャプションにpointer-events: noneを指定することです。
これがないとおかしなことになります。
（どうなるかは予想がつくと思います）

勢いで作ってはみましたが、見やすいとは言いがたいですね……。
でもまあ作ってて楽しかったです。