日常總結 --- 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;
            }
        }
    }
}