パーツ番号 02-14-06 ・ CSSのみ

写真重ね半透明キャプションバー

画像下部に半透明の帯を重ねてキャプションを表示するスタイル。ギャラリーやスライダーのサムネイル説明に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="photo">
          <div class="bar">
            <span class="bar-txt">京都の紅葉、11月中旬撮影</span>
          </div>
        </div>

CSS

.d02-14-06{ display:flex; align-items:center; justify-content:center; }
        .d02-14-06 .photo{ position:relative; width:100%; height:180px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#fbbf24,#f97316); }
        .d02-14-06 .bar{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); padding:10px 14px; }
        .d02-14-06 .bar-txt{ font-size:12px; color:#fff; font-weight:600; letter-spacing:0.02em; }

クラス名 .d02-14-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。