Webflow magnetic hover effect for social icons

What you receive in Webflow

• 23 native elements and 8 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="mg">
  <div class="mg-inner">
    <h2 class="mg-title">Find us around the web</h2>
    <p class="mg-text">Each icon leans toward the pointer and its label follows it.</p>
    <div class="mg-row">
      <a class="mg-item" href="#" aria-label="Dribbble"><span class="mg-icon">Dr</span><span class="mg-tip">Dribbble</span></a>
      <a class="mg-item" href="#" aria-label="Behance"><span class="mg-icon">Be</span><span class="mg-tip">Behance</span></a>
      <a class="mg-item" href="#" aria-label="Instagram"><span class="mg-icon">Ig</span><span class="mg-tip">Instagram</span></a>
      <a class="mg-item" href="#" aria-label="LinkedIn"><span class="mg-icon">In</span><span class="mg-tip">LinkedIn</span></a>
      <a class="mg-item" href="#" aria-label="GitHub"><span class="mg-icon">Gh</span><span class="mg-tip">GitHub</span></a>
    </div>
  </div>
</section>
<style>
.mg { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #ffffff; color: #0f172a; padding: 120px 24px; }
.mg-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.mg-title { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
.mg-text { font-size: 17px; line-height: 1.6; color: #64748b; margin: 0 0 56px; }
.mg-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.mg-item { position: relative; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 24px; background: #f1f5f9; color: #0f172a; text-decoration: none; transition: background-color 0.25s ease; }
.mg-item:hover, .mg-item:focus-visible { background: #0f172a; color: #ffffff; }
.mg-item:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.mg-icon { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.mg-tip { position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 8px 12px; border-radius: 10px; background: #0f172a; color: #ffffff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px) scale(0.92); transition: opacity 0.2s ease, transform 0.25s ease; }
.mg-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: #0f172a; transform: translate(-50%, -5px) rotate(45deg); border-radius: 2px; }
.mg-item:hover .mg-tip, .mg-item:focus-visible .mg-tip { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), 0) scale(1); }
@media (max-width: 767px) { .mg { padding: 80px 20px; } .mg-title { font-size: 30px; } .mg-item { width: 64px; height: 64px; border-radius: 18px; } .mg-icon { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .mg-icon, .mg-tip { transition: opacity 0.2s ease; } }
</style>
<script>
(function () {
  if (window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  document.querySelectorAll(".mg-item").forEach(function (item) {
    var icon = item.querySelector(".mg-icon");
    var tip = item.querySelector(".mg-tip");
    item.addEventListener("pointermove", function (e) {
      var r = item.getBoundingClientRect();
      var dx = e.clientX - (r.left + r.width / 2), dy = e.clientY - (r.top + r.height / 2);
      icon.style.transform = "translate(" + dx * 0.25 + "px," + dy * 0.25 + "px)";
      item.style.setProperty("--tx", dx * 0.6 + "px");
    });
    item.addEventListener("pointerleave", function () { icon.style.transform = ""; item.style.setProperty("--tx", "0px"); });
  });
})();
</script>