今天这个卡片效果，我个人觉得还是非常实用的，具体效果如下：
HTML代码：
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】167—CSS实现响应式卡片悬停效果</title>
<link rel=”stylesheet” href=”style.css”></head>
<body>
<body>
<div class = container>
<div class = card>
<div class = image>
<img href = “http://www.webqdkf.com” src =01.jpg>
</div>
<div class = content>
<h3>一个人最好的状态</h3>
<p>有句话说：“当你独自穿过了暴风雨，你就不是原来的那个人了。”经过生活历练的人，最终都变成了更强大的自己。生活中，我们要学会清空情绪、清零往事、清静内心</p>
</div>
</div>
</div>
</body></body>
</html>
CSS代码：
* {
margin : 0;
padding: 0;
box-sizing : border-box;
font-familly : “Poppins”, sans-serif;
}
body {
display : flex;
align-items : center;
justify-content : center;
background-color: #444;
min-height : 800px;
}.container {
position : relative;
width : 1100px;
display : flex;
align-items : center;
justify-content : center;
flex-warp : warp;
padding : 30px;
}.container .card {
position: relative;
max-width : 300px;
height : 215px;
background-color : #fff;
margin : 30px 10px;
padding : 20px 15px;display : flex;
flex-direction : column;
box-shadow : 0 5px 20px rgba(0,0,0,0.5);
transition : 0.3s ease-in-out;
border-radius : 15px;
}
.container .card:hover {
height : 320px;
}.container .card .image {
position : relative;
width : 260px;
height : 260px;top : -40%;
left: 8px;
box-shadow : 0 5px 20px rgba(0,0,0,0.2);
z-index : 1;
}.container .card .image img {
max-width : 100%;
border-radius : 15px;
}.container .card .content {
position : relative;
top : -140px;
padding : 10px 15px;
color : #111;
text-align : center;visibility : hidden;
opacity : 0;
transition : 0.3s ease-in-out;}
.container .card:hover .content {
margin-top : 30px;
visibility : visible;
opacity : 1;
transition-delay: 0.2s;}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
