CSSのみで簡単に実装できる！マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック

サイト構築 -CSS

Post on:2023年11月7日

sponsors

CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。

一昔前なら、JavaScriptなどを使用しないと実装できませんでしたが、今ではCSSのみで簡単に実装できます。

まずは、実際の動作をデモページでご覧ください。

See the Pen
Anchor Positioning :hover Cards by coliss (@coliss)
on CodePen.

このエフェクトは、下記にインスパイアされて実装したとのことです。

画像: @vponamariov

また、@argyleinkもツールチップに変更して同様のエフェクトを実装しています。

See the Pen
View Transitions - Morphing Tip by coliss (@coliss)
on CodePen.

では、実装のポイントを紹介します。
まずはHTML、mainをラッパーに各カードはリスト要素で配置されています。

<main>
  <ul>
    <li><article>
        <h3>heading</h3>
        <p>text</p>
    </article></li>
  </ul>
  ...
</main>

<main>

<ul>

<h3>heading</h3>

</article></li>

</ul>

...

</main>

各カードの配置は、CSS Gridです。

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul {

display: grid;

grid-template-columns: repeat(2, 1fr);

list-style-type: none;

padding: 0;

margin: 0;

}

CSS Anchor Positioningとは、特定の要素を基準にしてその要素からポジションを指定できるCSSの機能（W3C）です。このCSS Anchor Pitioningと:has疑似クラスを使用して、このマグネットのようなホバーエフェクトを作成できます。

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
  inset:
      anchor(var(--anchor) top)
      anchor(var(--anchor) right)
      ... ;
}

article { anchor-name: --develop; }

ul:has(li:hover) { --anchor: --develop; }

ul::after {

inset:

anchor(var(--anchor) top)

anchor(var(--anchor) right)

... ;

}

CSSの:hasについて詳しくは、下記をご覧ください。

CSSの:has()疑似クラスの便利な使い方を徹底解説

リストに出入りするときにマグネットのようにくっついて追従させるには、トランジション遅延を使用します。

ul:has(li:hover) { --active: 1; }
ul::after {
  opacity: var(--active, 0);
  transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
  transition: opacity 0.2s 0.2s, inset 0.2s;
}

ul:has(li:hover) { --active: 1; }

ul::after {

opacity: var(--active, 0);

transition: opacity 0.2s, inset 0.2s 0.2s;

}

ul:hover::after {

transition: opacity 0.2s 0.2s, inset 0.2s;

}

入る時に不透明度を遅延させ、出る時にポジションを遅延させます。そうすることで、よりスムーズなアニメーションになります。

元ネタは下記ポストより。

CSS Tip! 🤙

You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)… https://t.co/eIm31YEJWy pic.twitter.com/xBT7UfJ22F

— jhey ▲🐻🎈 (@jh3yy) October 31, 2023