パーツ番号 07-03-07 ・ CSSのみ

メディアギャラリー混在

動画サムネ（再生アイコン付き）と画像サムネが混在するグリッド。マウスを乗せるとタイルが浮き上がります。WordPressのメディア一覧表示に。

css

プレビュー

ソースコード

HTML

<div class="d07-03-07-gallery">
          <div class="d07-03-07-cell d07-03-07-vid"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
          <div class="d07-03-07-cell d07-03-07-img"></div>
          <div class="d07-03-07-cell d07-03-07-img d07-03-07-img2"></div>
          <div class="d07-03-07-cell d07-03-07-vid d07-03-07-vid2"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
          <div class="d07-03-07-cell d07-03-07-img d07-03-07-img3"></div>
          <div class="d07-03-07-cell d07-03-07-vid d07-03-07-vid3"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
        </div>

CSS

.prev.d07-03-07{background:#f8fafc}
        .d07-03-07-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:340px}
        .d07-03-07-cell{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;cursor:pointer;
          transition:transform .3s ease,box-shadow .3s ease}
        .d07-03-07-cell:hover{transform:translateY(-6px);box-shadow:0 12px 22px rgba(0,0,0,.18)}
        .d07-03-07-img{background:linear-gradient(135deg,#fbbf24,#f97316)}
        .d07-03-07-img2{background:linear-gradient(135deg,#34d399,#059669)}
        .d07-03-07-img3{background:linear-gradient(135deg,#f472b6,#db2777)}
        .d07-03-07-vid{background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center}
        .d07-03-07-vid2{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
        .d07-03-07-vid3{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
        .d07-03-07-vid svg{width:26px;height:26px;fill:rgba(255,255,255,.9)}
        .d07-03-07-vid::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.5);border-radius:10px;
          opacity:0;transition:opacity .3s}
        .d07-03-07-vid:hover::after{opacity:1}

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