最近のWebサイトでは写真を強調して表示しつつ、マウスオーバーで説明を表示すると言った仕組みを提供しているところが多くなっています。見た目のインパクトも強く、アニメーションで目を引きやすい面白い仕組みです。
そんな説明表示をCSS3アニメーションを用いつつ、4パターンで見せてくれるのがCaption Hover Animationsです。では実際に見てみましょう。
こちらはデフォルトの表示です。
マウスオーバーすると下のようになります。
画像の上に説明（キャプション）が表示されました。
HTMLの定義としてはこのようになっています。

 ![](img/chaps_1x.jpg)

  

  

  

# Amazing Caption
  

Whatever It Is - Always Awesome

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

下半分のパターンもあります。
こんなパターンも。色が変わりつつ、さらに元画像の上下がじゃっかん縮まっています。
画像が拡大されるパターン。

サンプルの動画です。

Caption Hover Animationsの面白いところは、この機能を実現するためにJavaScriptを一切使っていないということです。CSS3の設定だけで実現していますので、JavaScriptをオフにしていても動くのが魅力と言えます。
マウスオーバーなのでスマートフォンやタブレットデバイスでは動かないのが難点ですが、ぜひ参考にして欲しい仕組みです。
Caption Hover AnimationsはHTML5/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
Caption Hover Animations
hasinhayder/ImageCaptionHoverAnimation