パーツ番号 10-12-11 ・ CSSのみ

会員限定動画サムネイル(鍵アイコン重ね・固定)

動画サムネイルに鍵アイコンとラベルを重ねた固定表示です。会員限定の講座動画やアーカイブ一覧の未視聴表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-11-card">
          <div class="d10-12-11-thumb">
            <span class="d10-12-11-lock">🔒</span>
          </div>
          <p class="d10-12-11-title">会員限定セミナー動画</p>
          <span class="d10-12-11-tag">Members Only</span>
        </div>

CSS

.d10-12-11-card{ width:100%; max-width:220px; }
        .d10-12-11-thumb{ position:relative; height:100px; border-radius:10px; background:linear-gradient(135deg,#334155,#0f172a); display:flex; align-items:center; justify-content:center; }
        .d10-12-11-lock{ font-size:26px; opacity:.85; }
        .d10-12-11-title{ margin:10px 0 6px; font-size:12.5px; font-weight:700; color:#1e293b; }
        .d10-12-11-tag{ display:inline-block; font-size:10px; font-weight:800; color:#fff; background:#475569; padding:3px 9px; border-radius:5px; }

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