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

Category : CSS

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

ギャラリー "旧古河庭園にて"

デモファイルをダウンロード

どうでもいいですが写真は自分で撮ったものです。
もっと見たい方は 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() はジェネレータで作りました。 三角っぽい背景は、左下から右上へのグラデーションで。

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

キャプションの diva の外に出す場合。

デモページ 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 を指定することです。
これがないとおかしなことになります。
(どうなるかは予想がつくと思います)

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

Leave a Reply