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

モノクロ→カラー

通常はグレースケール、ホバーで彩度が戻る上品な演出。WordPressのクライアントロゴ一覧やスタッフ紹介に使いやすい。

galleryhovercss

プレビュー

ソースコード

HTML

<div class="d07-01-02-row">
          <div class="d07-01-02-ph d07-01-02-a"><span>🌅</span></div>
          <div class="d07-01-02-ph d07-01-02-b"><span>🌊</span></div>
          <div class="d07-01-02-ph d07-01-02-c"><span>🌸</span></div>
        </div>

CSS

.d07-01-02-row{display:flex;gap:14px}
        .d07-01-02-ph{width:88px;height:110px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;filter:grayscale(1) contrast(.9);transition:filter .5s ease,transform .3s ease;box-shadow:0 6px 16px rgba(0,0,0,.12)}
        .d07-01-02-ph span{font-size:36px}
        .d07-01-02-a{background:linear-gradient(135deg,#f59e0b,#ef4444)}
        .d07-01-02-b{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
        .d07-01-02-c{background:linear-gradient(135deg,#ec4899,#a855f7)}
        .d07-01-02-ph:hover{filter:grayscale(0) contrast(1);transform:translateY(-4px)}

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