设计
需求:hover时,背景层变化,同时文字层动态上移,出现箭头按钮
结构
<ul>
<li>
<div class="bg"></div>
<div class="txt"></div>
</li>
</ul>
ul
层负责布局li
层设置背景图片bg
提供hover背景色txt
提供文字布局
代码实现
ul {
&_bg, &_txt{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
&_txt{
transition: all 0.1s ease-in-out;
}
li {
width: 280px;
height: 330px;
position: relative;
background-size: cover;
background-image: url('');
&:hover {
.bg {
background: rgba(82, 112, 255, 0.58);
filter: contrast(220%);
}
.txt {
top: -25px;
}
}
}
}