源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css制作的相应式卡片悬停特效</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #16384c;
}
.container {
position: relative;
100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
}
.container .Card {
position: relative;
position: relative;
display: flex;
max- 30%;
flex-direction: row;
background: #fff;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
margin: 20px 10px;
padding: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .Card .imgBx {
100%;
margin: 0 auto;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.container .Card .imgBx img {
max- 100%;
border-radius: 10px;
}
.container .Card .content {
position: relative;
padding: 10px 15px;
text-align: center;
color: #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
/* 这里实现点击卡片悬停 */
.container .Card:hover {
margin: 0 0 50px 0;
}
.container .Card:hover .content {
visibility: visible;
opacity: 1;
margin-top: 20px;
transition-delay: 0.3s;
}
/* 宽度自适应 在项目中这里可以使用bootstrap响应式布局 这里我们使用媒体查询实现*/
@media only screen and (min-320px) and (max-720px) {
.container .Card {
max- 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="Card">
<div class="imgBx">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt="">
</div>
<div class="content">
<h2>Card one</h2>
<p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p>
</div>
</div>
<div class="Card">
<div class="imgBx">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt="">
</div>
<div class="content">
<h2>Card Two</h2>
<p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p>
</div>
</div>
<div class="Card">
<div class="imgBx">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt="">
</div>
<div class="content">
<h2>Card Three</h2>
<p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p>
</div>
</div>
</div>
</body>
</html>