Open In App

Responsive Card with hover effect using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Cards are very important part for any website. It is used to display some important information in short to viewers. So, in this article, we will create a  responsive card with amazing hover effect using HTML and CSS. By using HTML we will design the basic structure of the card and then by using the properties of CSS, we can create the hover animation effect.

A sample gif is provided to understand today’s task with more clarity.

Step by step Implementation:

Step 1: First, Go to the internet and download a image for card and save it in images Folder. We will use this image later during implementation.

Step 2: Now, we will design a simple card structure in HTML. Comments are already in code for your help.

HTML




<!DOCTYPE html>
<html>
<body>
    <!--creating a class container which will hold card class
        and again card will hold imgbox class-->
    <div class="container">
        <div class="card">
            <div class="imgbox">
                <!--extracting image named gfg.jpg from images folder-->
                <img src=
            </div>
            <div class="content">
                <!--heading of the card-->
                <h1>GFG</h1>
 
                <!--content of the card-->
 
                <p>
                    A Computer Science portal for geeks.
                    It contains well written, well thought and well
                    explained computer science and programming articles, quizzes.
                </p>
            </div>
        </div>
    </div>
</body>
</html>


Step 3: Next, we will use some CSS properties to design the card and use the hover class to get the animation effect when we hover the mouse over the card.

CSS




* {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
 
/*Apply css properties to body*/
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
}
 
/*Apply css properties to container class*/
 
.container {
    position: relative;
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 35px;
}
 
/*Apply css properties to card class*/
 
.container .card {
    height: 220px;
    max-width: 200px;
    position: relative;
    margin: 30px 10px;
    padding: 20px 15px;
    background: wheat;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 202px black;
    transition: 0.3s ease-in-out;
}
 
/*Apply css properties to card class when it get pointed by cursor*/
 
.container .card:hover {
    height: 420px;
}
 
/*Apply css properties to imgbox class*/
 
.containe .card .imgbox {
    position: relative;
    width: 260px;
    height: 260px;
    top: -60px;
    left: 20px;
}
 
/*Apply css properties to img tag*/
 
.container .card .imgbox img {
    max-width: 100%;
    border-radius: 4px;
}
 
/*Apply css properties to content class*/
 
.container .card .content {
    position: relative;
    margin-top: -100px;
    padding: 10px 15px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease-in-out;
}
 
/*Apply css properties to content when card gets hovered*/
 
.container .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s;
}
 
/* Css part completed*/


Complete Code: In this section, we will combine the above three sections to create a hover card using HTML and CSS.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
 
        /*apply css properties to body*/
 
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
        }
 
        /*apply css properties to container class*/
 
        .container {
            position: relative;
            width: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 35px;
        }
 
        /*apply css properties to card class*/
 
        .container .card {
            height: 220px;
            max-width: 200px;
            position: relative;
            margin: 30px 10px;
            padding: 20px 15px;
            background: wheat;
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 202px black;
            transition: 0.3s ease-in-out;
        }
 
        /*apply css properties to card class when it get pointed by cursor*/
 
        .container .card:hover {
            height: 420px;
        }
 
        /*apply css properties to imgbox class*/
 
        .containe .card .imgbox {
            position: relative;
            width: 260px;
            height: 260px;
            top: -60px;
            left: 20px;
        }
 
        /*apply css properties to img tag*/
 
        .container .card .imgbox img {
            max-width: 100%;
            border-radius: 4px;
        }
 
        /*apply css properties to content class*/
 
        .container .card .content {
            position: relative;
            margin-top: -100px;
            padding: 10px 15px;
            text-align: center;
            color: #111;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s ease-in-out;
        }
 
        /*apply css properties to content when card gets hovered*/
 
        .container .card:hover .content {
            visibility: visible;
            opacity: 1;
            margin-top: -10px;
            transition-delay: 0.3s;
        }
 
        /* css part completed*/
    </style>
 
</head>
 
<body>
 
    <!--creating a class container which will hold
         card class and again card will hold imgbox class-->
    <div class="container">
        <div class="card">
            <div class="imgbox">
 
                <!--extracting image named gfg.jpg from images folder-->
                <img src=
 
            </div>
            <div class="content">
 
                <!--heading of the card-->
                <h1>GFG</h1>
 
                <!--content of the card-->
                <p>
                    A Computer Science portal for geeks.
                    It contains well written, well thought and well explained
                    computer science and programming articles, quizzes.
                </p>
            </div>
        </div>
    </div>
</body>
</html>


 Output:



Last Updated : 08 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads