Magnetic Hover Card
Home
Snippets
Magnetic Hover Card
HTML
CSS
JS
<div class="container"> <div class="card"> <div class="highlight"></div> <div class="text">Design</div> </div> </div>
body { margin: 0; background: #111; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } .container { display: flex; gap: 30px; } .card { width: 220px; height: 300px; background: linear-gradient(135deg, #202020, #353535); border-radius: 18px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); } .card:hover { transform: translateZ(30px); } .highlight { position: absolute; width: 150%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 60%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; border-radius: 50%; } .card:hover .highlight { opacity: 1; } .text { position: absolute; bottom: 20px; left: 20px; color: white; font-size: 20px; font-weight: bold; letter-spacing: 1px; }
const cards = document.querySelectorAll(".card"); cards.forEach(card => { card.addEventListener("mousemove", (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const highlight = card.querySelector(".highlight"); highlight.style.left = `${x}px`; highlight.style.top = `${y}px`; const moveX = (x - rect.width / 2) / 10; const moveY = (y - rect.height / 2) / 10; card.style.transform = `translate(${moveX}px, ${moveY}px)`; }); card.addEventListener("mouseleave", () => { card.style.transform = `translate(0, 0)`; }); });
Ad #1
Ad #2
Scroll to Top