WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated card of social media
4583
Andev.web
Open In Editor
Publish Your Code
Recommended
30 March 2025
Checkbox card
6 September 2025
CSS Animated Progress Bar HTML Structure
19 May 2025
flex-box card
HTML
Copy
Andev Web
Instagram
Followers:
33K
Follow me
GitHub
Followers:
330
Follow me
Linkedin
Followers:
550
Follow me
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; min-height: 100vh; background-color: #060606; display: grid; place-items: center; color: white; } #cards { width: 70%; padding-inline: 20px; display: flex; flex-wrap: wrap; gap: 30px; } .card { min-width: 200px; height: 350px; flex: 1 1 250px; background-color: rgba(255, 255, 255, 0.12); border-radius: 12px; position: relative; } #cards:hover > .card { background: radial-gradient( 400px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 1), rgba(255, 255, 255, 0.12) 40% ); } .card-content { position: absolute; inset: 1px; background-color: #131315; border-radius: inherit; } .card:nth-child(1) { --color: 348 80% 60%; } .card:nth-child(2) { --color: 0 0% 100%; } .card:nth-child(3) { --color: 220 100% 35%; } .card::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 0.35), transparent 40% ); border-radius: inherit; opacity: 0; z-index: 2; } #cards:hover > .card::before { opacity: 1; } a { all: unset; cursor: pointer; } .card-content { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 18px; align-items: center; } .card-content > i { font-size: 10rem; color: rgba(255, 255, 255, 0.5); } .card-content > p { color: rgba(255, 255, 255, 0.5); } .card-content > a { width: 90%; padding-block: 0.8rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 10; } .card-content > a:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
JS
Copy
const cards = Array.from(document.querySelectorAll(".card")); const cardsContainer = document.querySelector("#cards"); cardsContainer.addEventListener("mousemove", (e) => { for (const card of cards) { const rect = card.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; card.style.setProperty("--mouse-x", `${x}px`); card.style.setProperty("--mouse-y", `${y}px`); } });