設計
需求: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;
}
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;
transition: all 0.1s ease-in-out;
}
}
}
}