cssイメージキャプションのスライドイン

読者のジェイソン・ルチェッシさんが、ロールオーバーするとイメージキャプションがスライドインしてくるデモを送ってくださいました。効果を実現させるために無数の入れ子DIVタグが使われていたので、イメージキャプションを付ける標準HTML5の構造とCSSを使って私なりの方法を考えてみました。

そもそもこの効果の目的は一体何なのでしょうね。レイアウト上のスペース削減や、デザイン上キャプション自体が少々目障りだから条件付きで表示されるだけにしておいた方がよいとか・・・。送っていただいたデモだけでは分からなかったのですが、もし気に入らなかったら使わないでおいてくださいね。

HTML5の構造

ピュアでセマンティック的にも全く問題のない、イメージキャプションのマークアップです。

<figure>
        <img src="yay.jpg" alt="">
        <figcaption>
                yay!!!
        </figcaption>
</figure>
   

CSSの構造

エンパワーメントの概念は「figure要素は基本的なビルディングブロックで、全てをラップしている。」ここから来ています。figure要素はposition: relative;を指定する必要があり、これによりキャプションを配置したい場所に絶対配置することが可能となり余計なスペースを使うこともありません。またキャプションスライド時に、figureの枠から出たら消滅させる為にoverflow: hidden;も必要になってきます。

figure {
  display: block;
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
}
   

スライディングアクションをキメる

画像がロールオーバーされた時にきっちりスライディングアクションをキメるためには、キャプションを完璧に隠さなければなりません。まずはキャプションを左下少し越えたところに配置し、opacityを0にして完全に隠しましょう。それからfigureの範囲内がホーバーされた時に、キャプションをスライドインさせ、opacityも元に戻しましょう。実際にスライドさせるには「transition」を使用する必要があります。

figcaption {
  position: absolute;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  bottom: 0;
  left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
  left: 0;
}
   

オプション

デモではそれぞれ配置場所とスライドインさせる方向が異なります。これはただfigureにクラス名を追加し、クラスによって配置等が異なるように設定してあるだけです。

<figure class="cap-top">
   

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
   

キャプションに気付いてもらうために・・・

折角苦労してスライドインするキャプションを作ったのに、誰も気付いてくれなかったら意味がありません。なのでクエスチョンマークのサインを使って、キャプションの存在をアピールしてみましょう。セマンティック的によくない不要なマークアップを増やすよりも、疑似要素を使って生成されたコンテンツを使ってみましょう。

figure:before {
  content: "?";
  position: absolute;
  background: rgba(255,255,255,0.75);
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  /* Only Fx 4 supporting transitions on psuedo elements so far... */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  opacity: 0.75;
}
figure:hover:before {
  opacity: 0;
}
   

注目していただきたいのが、position: absolute;を使っているのにCSS上でそれ以外に配置に関する値がないところです。何故かと言うと、配置はオプションで作成したクラスの方で指定しているからです。きっとクエスチョンマークは、キャプションがスライドインしてくる隅に配置するのがいいかと思いますので、こんな感じになります：

.cap-left:before {  bottom: 10px; left: 10px; }
   

実際に使ってみること！

このサイトで見つけたアイデアは、是非実際使ってみてください。可能なら（全部あなたが考えたと上司に伝えても構いませんので）会社の大きなプロジェクトなどで使用して、どんどん昇給してもらっちゃってください。