卡片对于任何网站来说都是非常重要的部分。它用于向观众简要展示一些重要信息。因此，在本文中，我们将使用 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.
输出：
