Close Menu
    JavaScript

    How to create Animated Social Media Card Hover using HTML CSS and JS

    Coding StellaBy Updated:No Comments4 Mins Read

    Let’s create an Animated Social Media Card Hover using HTML, CSS, and JavaScript. This project will feature sleek, interactive social media cards that animate beautifully when hovered, making your profile or link section more engaging and professional.

    We’ll use:

    • HTML to structure the social media cards.
    • CSS to add stylish hover effects, colors, and smooth animations.
    • JavaScript to add interactive touches like dynamic icons or glow effects.

    Let’s get started on building the Animated Social Media Card Hover project. Whether you’re a beginner or an experienced developer, this project is a fun way to enhance your UI skills and make your website look more modern and interactive! 💻✨

    HTML :

    This code creates three interactive social media cards (Instagram, GitHub, and LinkedIn) using HTML. Each card shows the platform icon, name, follower count, and a “Follow me” or “Connect” button with a link icon. Font Awesome is used for the icons, and an external CSS file (style.css) handles the design and hover effects, while a script.js file (if added) can add animations or interactions.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Card Hover | @coding.stella</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="cards">
        <div class="card">
            <div class="card_content">
                <i class="fa-brands fa-instagram"></i>

                <h2>Instagram</h2>
                <p>Followers : <span>625k</span></p>

                <a href="#">
                    <i class="fa-solid fa-link"></i>
                    <span>Follow me</span>
                </a>
            </div>
        </div>


        <div class="card">
            <div class="card_content">
                <i class="fa-brands fa-github"></i>

                <h2>Github</h2>
                <p>Followers : <span>150k</span></p>

                <a href="#">
                    <i class="fa-solid fa-link"></i>
                    <span>Follow me</span>
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card_content">
                <i class="fa-brands fa-linkedin"></i>

                <h2>Linkedin</h2>
                <p>Connection : <span>100k</span></p>

                <a href="#">
                    <i class="fa-solid fa-link"></i>
                    <span>Connect</span>
                </a>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

    CSS :

    This CSS styles the social media hover cards with a modern glowing effect. It uses the Poppins font and centers everything on a dark background. The .card elements are flexible boxes with rounded corners and transparent gradients. When the user hovers over the card area, a radial light effect appears that follows the mouse using CSS variables (--mouse-x, --mouse-y). Each card has its own highlight color, and the inner .card_content centers the icon, text, and button neatly. The buttons have smooth hover effects with subtle color and border changes for a clean, glowing look.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: poppins;
  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;
  flex-direction: column;
}
.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;
  gap: 18px;
  align-items: center;
}
.card_content > i {
  font-size: 5rem;
  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: 8px;
  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);
}

    JavaScript:

    This JavaScript adds an interactive glow effect to the cards. It listens for mouse movement inside the #cards container, calculates the mouse position (x and y) relative to each card, and updates CSS variables --mouse-x and --mouse-y. These values are used in the CSS to create a dynamic radial gradient that follows the cursor, making the glow move smoothly as you hover over the cards.

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

    In conclusion, creating an Animated Social Media Card Hover using HTML, CSS, and JavaScript is a great way to add creativity and interactivity to your web design. By combining structure, animation, and small interactive effects, we’ve made social media links more fun and visually appealing 🚀

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply