パーツ番号 07-01-10 ・ CSSのみ

デュオトーンホバー

mix-blend-modeの単色オーバーレイがホバーでふっと外れ、元の色が現れる。WordPressのイベント告知やクリエイティブ系一覧ページに映える。

galleryhovercssoverlay

プレビュー

ソースコード

HTML

<div class="d07-01-10-row">
          <figure class="d07-01-10-fig">
            <div class="d07-01-10-base d07-01-10-p1"><span>🎸</span></div>
            <div class="d07-01-10-ov d07-01-10-o1"></div>
          </figure>
          <figure class="d07-01-10-fig">
            <div class="d07-01-10-base d07-01-10-p2"><span>🎹</span></div>
            <div class="d07-01-10-ov d07-01-10-o2"></div>
          </figure>
        </div>

CSS

.d07-01-10-row{display:flex;gap:16px}
        .d07-01-10-fig{margin:0;position:relative;width:110px;height:140px;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.15);isolation:isolate}
        .d07-01-10-base{width:100%;height:100%;display:flex;align-items:center;justify-content:center;filter:grayscale(1) contrast(1.1)}
        .d07-01-10-base span{font-size:44px}
        .d07-01-10-p1{background:linear-gradient(135deg,#f59e0b,#ef4444)}
        .d07-01-10-p2{background:linear-gradient(135deg,#22d3ee,#6366f1)}
        .d07-01-10-ov{position:absolute;inset:0;mix-blend-mode:color;opacity:1;transition:opacity .5s ease}
        .d07-01-10-o1{background:#7c3aed}
        .d07-01-10-o2{background:#e11d48}
        .d07-01-10-fig:hover .d07-01-10-ov{opacity:0}
        .d07-01-10-fig:hover .d07-01-10-base{filter:grayscale(0) contrast(1)}
        .d07-01-10-base{transition:filter .5s ease}

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