📜  使用 HTML 和 CSS 具有悬停效果的响应式卡片

📅  最后修改于: 2021-10-31 05:14:40             🧑  作者: Mango

卡片对于任何网站来说都是非常重要的部分。它用于向观众简要展示一些重要信息。因此,在本文中,我们将使用 HTML 和 CSS 创建一个具有惊人悬停效果的响应式卡片。通过使用 HTML我们将设计卡片的基本结构,然后通过使用CSS的属性,我们可以创建悬停动画效果。

提供了一个示例 gif 以更清楚地了解今天的任务。

分步实施:

第 1 步:首先, 访问互联网并下载卡片图像并将其保存在图像文件夹中。我们稍后将在实施过程中使用此图像。

第 2 步:现在,我们将用 HTML设计一个简单的卡片结构。注释已在代码中以供您帮助。

HTML


  
  

  
    
    
           
               
                                                    
               
                                    

GFG

                                      

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

               
        
    
     


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


HTML


  

  
    
  

  

  
    
    
           
               
                                                    
               
                                    

GFG

                                      

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

               
        
    
     


第三步:接下来,我们将使用一些CSS属性来设计卡片,并使用hover类来获得鼠标悬停在卡片上时的动画效果。

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

完整代码:在本节中,我们将结合以上三个部分,使用 HTML 和 CSS 创建一个悬停卡片。

HTML



  

  
    
  

  

  
    
    
           
               
                                                    
               
                                    

GFG

                                      

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

               
        
    
     

输出: