鼠标移入移出时候改阴影层高度
使用css3,会有bug
简单写了一个小demo,你看下是不是你要的效果
HTML
<div class="pat-wrap">
<div>
<img
class="pat-img"
src="https://avatar.csdnimg.cn/B/0/B/1_iskelel_1617344422.jpg"
/>
</div>
<div class="pat-shade">
<p>隐藏</p>
<p>隐藏</p>
<p>隐藏</p>
</div>
</div>
CSS
.pat-wrap {
position: relative;
overflow: hidden;
width: 150px;
height: 150px;
}
.pat-shade {
position: absolute;
width: 100%;
bottom: -50px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
transition: bottom ease-out .2s;
}
.pat-wrap:hover .pat-shade {
bottom: 0;
}