今回のお題は、画像にキャプションを示すアニメーションだ。マウスポインタを画像に重ねると説明書きが現れる(サンプル1)。画像にもちょっとしたアニメーションが加えてある。用いる設定は、さほど目新しいものではない。組み合わせや細かな調整を加えてつくり上げた表現だ。 サンプル1 CSS3: Hover effect of an image and a caption キャプションを加えた画像の静的スタイル <body>要素に書くコードはつぎのように構成した。画像の<img>要素に続けて<div>要素(class属性"mask")を置き、<div>要素の中に、タイトルの<h3>要素(class属性"figure-title")と説明書きの<div>要素(class属性"figure-caption")を加えた。それらを<div>要素(class属性"figure")でひとつにまとめ、さらに<di