ウェブサイトで画像を配置する際、説明文などを併記することって多いけど、デザイン的にすっきり見せたいとか、不要な情報を最初から雑多に並べるのがイヤ、と言うの場合に使うことがある、画像上にテキストを表示させる4つの方法。

1.画像の上にキャプションを配置する方法

See the Pen [figure] 画像の上にキャプションを表示する by Tora (@webtoranomaki) on CodePen.

figureで囲ったブロックにimgで画像を設置、figcaptionでキャプションを設置。figureに対して、position :relative; をセットして、あとはabsoluteでキャプション位置を決める。これを基本形として、以下2~4は応用となる。

2.画像にマウスを乗せるとキャプションを表示

See the Pen [figure] 画像の上にキャプションを表示する (hoverでキャプション表示) by Tora (@webtoranomaki) on CodePen.

opacity: 0;で見えなくしたキャプションをhoverで opacity: 1;としているだけ。

3.画像にマウスを乗せるとキャプションを非表示

See the Pen [figure] 画像の上にキャプションを表示する (hoverでキャプション非表示) by Tora (@webtoranomaki) on CodePen.

2の反対。hoverで opacity: 0;として見えないようにしているだけ。

4.画像にマウスを乗せるとキャプションをオーバーレイ表示

See the Pen [figure] 画像の上にキャプションを表示する (hoverでキャプション表示・オーバーレイ) by Tora (@webtoranomaki) on CodePen.

2つ基本は同じ。ただ、背景領域の「幅」と「高さ」を100%にしている。キャプションをデフォルトでは「天地中央揃え」にしているが、不要ならfigcaption-textのスタイルを適宜変更する。