カードホバーで隣接要素変化

解説

横並びのカードのうち一枚にマウスを乗せると、そのカードは大きく前に出て、残りのカードは少し縮んで薄くなる連動演出です。JavaScript は使わず、CSS の隣接・兄弟セレクタと、親に :has() を組み合わせて実現しています。ホバーしたカード以外を :not(:hover) で選び、transform: scale と opacity を transition でなめらかに変化させているため、グリッド全体に視線を導くリズムが生まれます。

向いている使いどころ

• サービスや料金プランを横並びで見せ、注目してほしい一つを引き立てたいとき
• メンバー紹介や事例カードで、選択中の項目を直感的に分からせたいとき

変化の度合いは縮小側の scale の値（例では0.92）と opacity で、速さは transition の秒数で調整できます。注意点として、親の :has() は比較的新しい CSS 機能のため、古いブラウザでは縮小効果が効かないことがあります。その場合でもホバー中のカード自体は拡大するので、表示が壊れることはありません。動きを抑えたい利用者向けに prefers-reduced-motion で transition を弱める配慮も加えられます。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調