CSSだけでマグネットのようにくっついて追従するホバーエフェクトを実装する

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

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

まずはHTML、mainをラッパーに各カードはリスト要素で配置されています。

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

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

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) ...;
}

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

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;
}

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

inserted by FC2 system