代码
Html代码:
<div class="container">
<div class="card">
<div class="imgBx">
<img src="https://liangxiansheng688.com.cn/1.jpg" alt="">
</div>
<div class="content">
<h2>Card One</h2>
<p>啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧</p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="https://liangxiansheng688.com.cn/mainPage/1.jpg" alt="">
</div>
<div class="content">
<h2>Card Two</h2>
<p>啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧</p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="https://sch.liangxiansheng688.com.cn:7890/1.jpg" alt="">
</div>
<div class="content">
<h2>Card Three</h2>
<p>啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧</p>
</div>
</div>
</div>
CSS代码:
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #16384c;
}
.container {
position: relative;
width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.container .card {
position: relative;
max-width: 300px;
height: 215px;
background: #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;
}
.container .card:hover {
height: 420px;
}
.container .card .imgBx {
position: relative;
width: 260px;
height: 260px;
top: -60px;
left: 20px;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.container .card .imgBx img {
max-width: 100%;
border-radius: 4px;
}
.container .card .content {
position: relative;
margin-top: -140px;
padding: 10px 15px;
text-align: center;
color: #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.container .card:hover .content {
visibility: visible;
opacity: 1;
margin-top: -40px;
transition-delay: 0.3s;
}
声明:
本文采用
BY-NC-SA
协议进行授权,如无注明均为原创,转载请注明转自
Eric · 梦曦
本文地址: 实例:图片响应式悬停效果
本文地址: 实例:图片响应式悬停效果