Webflow hover reveal cards (circle mask)

What you receive in Webflow

• 34 native elements and 12 classes.
• Breakpoints: mobile landscape (767px), tablet (991px).
• 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="mk">
  <div class="mk-inner">
    <h2 class="mk-title">Services</h2>
    <div class="mk-grid">
      <a class="mk-card" href="#">
        <div class="mk-face"><span class="mk-num">01</span><h3 class="mk-name">Brand identity</h3><p class="mk-desc">Logos, type and colour systems that hold up everywhere.</p></div>
        <div class="mk-face mk-over" aria-hidden="true"><span class="mk-num">01</span><h3 class="mk-name">Brand identity</h3><p class="mk-desc">Start with a two-week sprint →</p></div>
      </a>
      <a class="mk-card" href="#">
        <div class="mk-face"><span class="mk-num">02</span><h3 class="mk-name">Websites</h3><p class="mk-desc">Fast marketing sites your team can edit without a developer.</p></div>
        <div class="mk-face mk-over" aria-hidden="true"><span class="mk-num">02</span><h3 class="mk-name">Websites</h3><p class="mk-desc">See recent launches →</p></div>
      </a>
      <a class="mk-card" href="#">
        <div class="mk-face"><span class="mk-num">03</span><h3 class="mk-name">Product design</h3><p class="mk-desc">Flows and interfaces tested with real users before build.</p></div>
        <div class="mk-face mk-over" aria-hidden="true"><span class="mk-num">03</span><h3 class="mk-name">Product design</h3><p class="mk-desc">Book a discovery call →</p></div>
      </a>
    </div>
  </div>
</section>
<style>
.mk { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #fafaf9; color: #1c1917; padding: 112px 24px; }
.mk-inner { max-width: 1120px; margin: 0 auto; }
.mk-title { font-size: 44px; letter-spacing: -0.03em; margin: 0 0 40px; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-card { position: relative; display: block; min-height: 280px; border-radius: 24px; overflow: hidden; background: #ffffff; border: 1px solid #e7e5e4; color: inherit; text-decoration: none; }
.mk-face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 32px; }
.mk-num { font-size: 14px; font-weight: 700; color: #a8a29e; }
.mk-name { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: auto 0 10px; }
.mk-desc { font-size: 16px; line-height: 1.55; color: #57534e; margin: 0; }
.mk-over { background: #1d4ed8; color: #ffffff; -webkit-clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1), -webkit-clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.mk-over .mk-num, .mk-over .mk-desc { color: #dbeafe; }
.mk-card:hover .mk-over, .mk-card:focus-visible .mk-over { -webkit-clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.mk-card:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
@media (max-width: 991px) { .mk-grid { grid-template-columns: 1fr; } .mk-card { min-height: 220px; } }
@media (max-width: 767px) { .mk { padding: 80px 20px; } .mk-title { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .mk-over { transition: none; } }
</style>
<script>
document.querySelectorAll(".mk-card").forEach(function (card) {
  function at(e) { var r = card.getBoundingClientRect(); card.style.setProperty("--x", ((e.clientX - r.left) / r.width * 100) + "%"); card.style.setProperty("--y", ((e.clientY - r.top) / r.height * 100) + "%"); }
  card.addEventListener("pointerenter", at);
  card.addEventListener("pointerleave", at);
});
</script>