CSS | 画像の上にテキスト、キャプションを重ねる方法
CSSで画像の上にテキストやキャプションを重ねて表示する方法とサンプルコードを紹介しています。
画像の上にテキストを重ねる方法
以下は、画像の上にテキストを重ねた表示サンプルになります。
Hallo World
HTMLにはclass名に「overlay-text」と名前を付けたdivタグをコンテナ要素として配置しています。
コンテナ要素の中には、画像タグと、上から重ねるテキスト用のspanタグを設置しています。
<div class="overlay-text">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<span>Hallo World</span>
</div>CSSでコンテナ要素に幅と高さを指定、「position」プロパティで「relative」を指定します。
画像要素には横幅をコンテナ要素の幅と合わせる為に100％を指定。
テキスト部分となるspanタグには、「position」プロパティで「absolute」を指定します。
「absolute」を指定する事で「relative」となっている親要素の左上を基準点に位置を絶対値で配置可能になります。
今回は画像（コンテナ要素）の下部中央にテキストを配置していますので「bottom」プロパティで「0」を指定、「left」で「50%」を指定しています。
テキストの支点を真ん中にする為に「transform」プロパティで「translateX(-50%)」を指定しています。
- テキストを画像の上部分に配置する場合は「bottom」プロパティではなく「top」プロパティを利用します。
- また、テキストが左寄せ、右寄せの場合は「transform」プロパティは不要です。
- テキストをpタグで設置する場合は「margin」と「padding」を「0」にしておくとズレなくなります。
.overlay-text {
width: 200px;
height: 200px;
position: relative;
margin: 10px;
}
.overlay-text img {
width: 100%;
}
.overlay-text span {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
画像の上にキャプションを重ねる方法
以下は、画像の上にキャプション（説明）を重ねた表示サンプルになります。
キャプションタグのテキストを画像の上に重ねる場合も、spanタグと同様のCSSで実装可能です。
figureタグにclass名「overlay-caption」を付与しています。
キャプションにはfigcaptionタグを利用しています。
<figure class="overlay-caption">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<figcaption>画像の説明文</figcaption>
</figure>.overlay-caption {
width: 200px;
height: 200px;
position: relative;
margin: 10px;
}
.overlay-caption img {
width: 100%;
}
.overlay-caption figcaption {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}