Designing Stunning Team Member Card with HTML & CSS

A Team Member Card with Hover Effect is an elegant way to showcase your team members while adding an interactive touch. These cards usually display a team member’s photo, name, position, and links to their social profiles. Upon hovering, additional information or visual effects are revealed, enhancing user engagement.

Using HTML and CSS, you can create visually appealing cards that are both functional and responsive. The hover effect can include transformations like scaling, sliding content, or fading in details, offering a modern and dynamic user experience. These cards are ideal for “About Us” or “Our Team” sections of websites.

By incorporating subtle animations and creative layouts, you can present your team members professionally while keeping the design engaging. Adding social media links makes the cards even more useful, allowing users to connect with team members easily.

Create index.html file and copy code and paste code our layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Card with Hover Effect / Code by Mycodingtutorial</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="team-card">
            <img src="image/image-1.jpg" alt="Team Member">
            <div class="info">
                <h3>Elizabeth</h3>
                <p>Web Developer</p>
            </div>
            <div class="icons">
                <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <div class="team-card">
            <img src="image/image-2.jpg" alt="Team Member">
            <div class="info">
                <h3>Olivia</h3>
                <p>Web Developer</p>
            </div>
            <div class="icons">
                <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <div class="team-card">
            <img src="image/image-3.jpg" alt="Team Member">
            <div class="info">
                <h3>Theodore</h3>
                <p>Web Developer</p>
            </div>
            <div class="icons">
                <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <div class="team-card">
            <img src="image/image-4.jpg" alt="Team Member">
            <div class="info">
                <h3>James</h3>
                <p>Web Developer</p>
            </div>
            <div class="icons">
                <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </div>
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

</body>
</html>

Create style.css file and copy code and paste code our layout.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #4db2ec;
    font-family: Arial, sans-serif;
}

.container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 90%;
    max-width: 1200px;
}

.team-card{
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.team-card:hover{
    transform: translateY(-10px);
    background-color: #c4364efc;
}

.team-card img{
    width: 100%;
}

.team-card .info{
    padding: 15px;
    text-align: center;
}

.team-card .info h3{
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
}

.team-card:hover .info h3, .team-card:hover .info p{
    color: #fff;
}

.team-card .info p{
    font-size: 0.9rem;
    color: #4db2ec;
    font-weight: 600;
}

.icons{
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 2s ease;
}

.team-card:hover .icons{
    opacity: 1;
    transform: translateY(0);
}

.icons a{
    width: 40px;
    height: 40px;
    background-color: #c4364efc;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background 0.3s ease;
}

.icons a:hover{
    background-color: #fff;
    color: #c4364efc;
}

A Team Member Card with Hover Effect adds a professional and interactive touch to your website, showcasing your team dynamically while enhancing user engagement.