日常总结 --- hover图片变化效果

设计

需求：hover时，背景层变化，同时文字层动态上移，出现箭头按钮

结构

<ul>
    <li>
        <div class="bg"></div>
        <div class="txt"></div>
    </li>
</ul>

1. ul层负责布局
2. li层设置背景图片
3. bg提供hover背景色
4. 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;
            }
        }
    }
}