How to Make Animated Cards with HTML and CSS

Want to create beautiful and interactive card designs using only HTML and CSS? In this tutorial, you’ll learn how to make animated cards with HTML and CSS step by step. We’ll build a fully responsive card layout featuring smooth hover animations, image zoom effects, gradient buttons, rounded corners, and a modern user interface.

This project is perfect for beginners and front-end developers looking to improve their CSS skills while creating professional website components. Since the design uses only HTML and CSS, there’s no need for JavaScript or external libraries. The layout is lightweight, fast, mobile-friendly, and easy to customize for blogs, portfolios, landing pages, and business websites.

By the end of this tutorial, you’ll have a stylish animated card component that you can reuse in your own web projects.

index.html

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animated Cards with HTML and CSS Code By Mycodingtutorial</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="card-wrapper">

            <div class="card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800" alt="">
                </div>

                <div class="card-content">
                    <span class="category">Web Design</span>

                    <h3>Creative Landing Page</h3>

                    <p>
                        Modern responsive website design with beautiful UI and smooth CSS animations.
                    </p>

                    <a href="#" class="btn">Read More</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800" alt="">
                </div>

                <div class="card-content">
                    <span class="category">Development</span>

                    <h3>Modern Dashboard UI</h3>

                    <p>
                        Build responsive admin dashboards using HTML, CSS and JavaScript.
                    </p>

                    <a href="#" class="btn">Read More</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800" alt="">
                </div>

                <div class="card-content">
                    <span class="category">JavaScript</span>

                    <h3>Interactive Components</h3>

                    <p>
                        Create beautiful animations and engaging user experiences for websites.
                    </p>

                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
        </div>
    </body>
</html>

You will also like this post

style.css

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

body{
    background:#0f172a;
    font-family:Arial,sans-serif;
    padding:60px 20px;
}

/* Grid */

.card-wrapper{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* Card */

.card{
    position:relative;
    overflow:hidden;
    border-radius:25px;
    background:#1e293b;
    transition:.5s;
    cursor:pointer;
}

.card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:25px;
    background:linear-gradient(
        45deg,
        #00d4ff,
        #7c3aed,
        #ff0080,
        #00d4ff
    );
    background-size:400%;
    z-index:-1;
    animation:borderMove 8s linear infinite;
}

.card:hover{
    transform:translateY(-15px);
    box-shadow:0 30px 60px rgba(0,0,0,.45);
}

.card-image{
    height:220px;
    overflow:hidden;
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;
}

.card:hover img{
    transform:scale(1.12) rotate(2deg);
}

.card-content{
    padding:30px;
}

.category{
    display:inline-block;
    padding:8px 18px;
    background:#0ea5e9;
    color:#fff;
    border-radius:30px;
    font-size:13px;
    margin-bottom:18px;
}

.card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:15px;
    transition:.4s;
}

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

.card p{
    color:#cbd5e1;
    line-height:1.7;
    margin-bottom:25px;
}

.btn{
    display:inline-block;
    text-decoration:none;
    padding:13px 28px;
    color:#fff;
    border-radius:50px;
    background:linear-gradient(45deg,#06b6d4,#7c3aed);
    transition:.4s;
}

.btn:hover{
    letter-spacing:1px;
    box-shadow:0 10px 30px rgba(124,58,237,.45);
}

/* Shine Effect */

.card::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-70%;
    width:60%;
    height:250%;
    background:rgba(255,255,255,.12);
    transform:rotate(25deg);
    transition:1s;
}

.card:hover::after{
    left:150%;
}

/* Border Animation */

@keyframes borderMove{

    0%{
        background-position:0%;
    }

    100%{
        background-position:400%;
    }

}

/* Tablet */

@media(max-width:991px){

.card-wrapper{
grid-template-columns:repeat(2,1fr);
}

}

/* Mobile */

@media(max-width:768px){

.card-wrapper{
grid-template-columns:1fr;
}

.card{
max-width:420px;
margin:auto;
}

}

Conclusion

Congratulations! You’ve successfully learned how to make animated cards with HTML and CSS from scratch. This project demonstrates how to create a modern, responsive card layout using only HTML and CSS, complete with smooth hover animations, image zoom effects, gradient buttons, and clean typography.

Because this design is lightweight and requires no JavaScript or external frameworks, it’s ideal for blogs, portfolios, business websites, landing pages, and personal projects. Feel free to customize the colors, fonts, spacing, and animations to match your own website style.

Keep practicing with different layouts and animation techniques to improve your front-end development skills and create even more engaging user interfaces.