Display Content on hovering Card using CSS

Last Updated : 24 Jul, 2024

In this article, we will see how we can create a card that displays content on hovering using the hover property using HTML and CSS.

HTML Code: In this section, we will create the structure of our HTML card.

Create a "div" with class name "card".
Create another "div" inside the main "div" with class name "card__inner".
Add heading "h2" and paragraph inside the second "div" with some random content.

HTML

<!DOCTYPE html>
<html>

<body>
    <!-- div with class which will act 
        as a container for us  -->
    <div class="card">

        <!--  Content of card to be 
            display on hovering -->
        <div class="card__inner">
            <h2>GeeksforGeeks</h2>


            <p>
                A Computer Science portal for
                geeks. It contains well written,
                well thought and well explained
                computer science and programming
                articles, quizzes and ...
            </p>

        </div>
    </div>
</body>

</html>

CSS Code: In this section, we will assign general properties to the element using CSS.

CSS

/* Assigning general property to card  */
.card {
    position: relative;
    width: 20rem;
    height: 30rem;
    background-size: cover;
    background-color: black;
    background-image: url('one.png');
    border-radius: 20px;
    background-position: center;
    overflow: hidden;
}

/*  Assigning properties to inner
    content of card  */
.card__inner {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    opacity: 0;
    padding: 2rem 1.3rem 2rem 2rem;
    transition: all 0.4s ease 0s;
}

/*  On hovering card opacity 
    of content must be 1*/
.card:hover .card__inner {
    opacity: 1;
}

/*  General property for heading
    and paragraph*/
.card__inner h2 {
    margin-top: 1rem;
}

.card__inner p {
    overflow-y: scroll;
    height: 87%;
    padding-right: 1rem;
    font-weight: 200;
    line-height: 2.5rem;
    margin-top: 1.5rem;
}

Complete Code: In this section, we will combined the above two sections of code.

HTML

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        /* Assigning general property to card  */
        .card {
            position: relative;
            width: 20rem;
            height: 30rem;
            background-size: cover;
            background-color: black;
            background-image: url('one.png');
            border-radius: 20px;
            background-position:  center;
            overflow: hidden;
        }

        /* Assigning properties to inner 
            content of card  */
        .card__inner {
            background-color: rgba(0, 0, 0, 0.9);
            color: #fff;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 1;
            opacity: 0;
            padding: 2rem 1.3rem 2rem 2rem;
            transition: all 0.4s ease 0s;
        }

        /* On hovering card opacity of 
            content must be 1*/
        .card:hover .card__inner {
            opacity: 1;
        }

        /* General property for heading 
            and paragraph*/
        .card__inner h2 {
            margin-top: 1rem;
        }

        .card__inner p {
            overflow-y: scroll;
            height: 87%;
            padding-right: 1rem;
            font-weight: 200;
            line-height: 2.5rem;
            margin-top: 1.5rem;
        }
    </style>
</head>

<body>
    <!--  div with class which will 
        act as a container for us -->
    <div class="card">

        <!--   Content of card to be 
            display on hovering -->
        <div class="card__inner">
            <h2>GeeksforGeeks</h2>
            
			<p>
                GeeksforGeeks: Computer Science portal 
                for geeks. It contains well written,
                well thought and well explained
                computer science and programming
                articles, quizzes etc. It contains many
                free and premium contents. 
                GeeksforGeeks: Computer Science portal 
                for geeks. It contains well written,
                well thought and well explained
                computer science and programming
                articles, quizzes etc. It contains many
                free and premium contents. 
            </p>

        </div>
    </div>
</body>

</html>

Output:

Display Content on hovering Card using CSS

NANDINIJAIN

Improve

Article Tags :

Display Content on hovering Card using CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?