Caption Hover Animations - No JavaScript。マウスオーバーで画像の上にキャプション表示

最近のWebサイトでは写真を強調して表示しつつ、マウスオーバーで説明を表示すると言った仕組みを提供しているところが多くなっています。見た目のインパクトも強く、アニメーションで目を引きやすい面白い仕組みです。

そんな説明表示をCSS3アニメーションを用いつつ、4パターンで見せてくれるのがCaption Hover Animationsです。では実際に見てみましょう。

マウスオーバーすると下のようになります。

HTMLの定義としてはこのようになっています。

<img src="img/chaps_1x.jpg" alt=""/>
<div class="caption">
  <div class="blur"></div>
  <div class="caption-text">
    <h1>Amazing Caption</h1>
    <p>Whatever It Is - Always Awesome</p>
  </div>
</div>

キャプションはaltなどで定義されている訳ではなく、HTMLタグが使えるようです。より自由度が高い仕組みと言えそうです。

サンプルの動画です。

Caption Hover Animationsの面白いところは、この機能を実現するためにJavaScriptを一切使っていないということです。CSS3の設定だけで実現していますので、JavaScriptをオフにしていても動くのが魅力と言えます。

マウスオーバーなのでスマートフォンやタブレットデバイスでは動かないのが難点ですが、ぜひ参考にして欲しい仕組みです。

Caption Hover AnimationsはHTML5/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Caption Hover Animations

hasinhayder/ImageCaptionHoverAnimation