Display Content on hovering Card using CSS

Last Updated : 06 Jan, 2023

In this article, we will see how we can create a card which 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

<style>
    /* 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>

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>