Display Content on hovering Card using CSS - GeeksforGeeks

01 Sep, 2021
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.
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 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 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
kalrap615
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
How to set input type date in dd-mm-yyyy format using HTML ?
Form validation using HTML and JavaScript
HTML | <img> align Attribute
How to set the default value for an HTML <select> element ?