キャプション表示の考察

相変わらず、「画像キャプション　演出」で検索すると、「jQuery で画像キャプションを簡単に…」などと表示されたりする今日この頃。

このサンプルの基本は、
:hover + transition(or animation) + position:absolute + top (left,right,bottom等)
となっています。

簡単なキャプション表示方法として、 画像を貼るための「figure」タグの overflow : hidden にしておいて、 figure の overflow で非表示になる位置に「figcaption」でキャプションを配置し、 「figure」の hover 時にキャプションの position を transition で変化させるなどが演出することができるようになっています。
なので html5 + css3 対応ブラウザが一般的になってきた今では、 わざわざ javascript (JQueryプラグイン) を使う必要はないかと思われます。

CSS3のみでホバー演出キャプション（フキダシツールチップも同様）を作る場合で、 マウスホバー（:hover）するタグの外側にキャプションやフキダシを初期配置する場合には、 hoverを設定するタグは「overflow:hidden」の仕様（又はhover前はdisplay:none）にしておかなければ、 タグの外に配置し opacity で透明化で隠してるキャプションやフキダシのブロックもマウスホバーのトリガーになり、 動作してしまう、という点に注意が必要かと思います。

対策として、
[対策1] 初期配置はhoverさせるタグの範囲内に置く（縮小・角度90度回転）
[対策2] 画面外に置く（hoverできない場所）
[対策3] display:noneにしておき、hover時にdisplay:blockやinline-blockを指定し、動きをanimation＆@keyframeで設定する
[対策4] hoverさせるタグのoverflow:hiddenにして、動かすものを親の範囲外に子として配置する
　等があるかと思います。

主なcssやテクニック

data-…

独自データ属性(又は、カスタムデータ属性)。すべての HTML 要素に自分で設定した属性名と値を指定することができる仕様。

content:attr(属性名)

属性名の値を表示

ページトップへ