パーツ番号 07-11-06 ・ CSSのみ

フォーカス強調ギャラリー(隣接画像縮小)

1枚にホバーすると、その画像だけが拡大し隣接する画像は縮小・減光して視線を集めるギャラリーです。WordPressの実績紹介やサービス比較の横並びギャラリーに使えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d07-11-06-row">
          <div class="d07-11-06-cell d07-11-06-c1"></div>
          <div class="d07-11-06-cell d07-11-06-c2"></div>
          <div class="d07-11-06-cell d07-11-06-c3"></div>
        </div>

CSS

.d07-11-06-row{display:flex;gap:10px}
        .d07-11-06-cell{width:72px;height:140px;border-radius:10px;transition:transform .3s ease,opacity .3s ease,filter .3s ease}
        .d07-11-06-c1{background:linear-gradient(160deg,#ff9a56,#ff6a88)}
        .d07-11-06-c2{background:linear-gradient(160deg,#43cbff,#9708cc)}
        .d07-11-06-c3{background:linear-gradient(160deg,#0ba360,#3cba92)}
        .d07-11-06-row:hover .d07-11-06-cell{transform:scale(.92);opacity:.55;filter:blur(.5px)}
        .d07-11-06-row .d07-11-06-cell:hover{transform:scale(1.12);opacity:1;filter:none}

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