Skip to content
Related Articles

Related Articles

Responsive Card with hover effect using HTML and CSS
  • Difficulty Level : Expert
  • Last Updated : 16 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

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">
  
                <!--extractig image naed gfg.jpg from images folder-->
  
            </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">
  
                <!--extractig image naed gfg.jpg from images folder-->
  
            </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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :