Responsive Card with hover effect using HTML and CSS

25 Mar, 2022
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 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="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg">             </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.
HTML
* {      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="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg">             </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>
  
 
sumitgumber28
CSS-Questions
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS