游標滑過圖片的圖層動態-我是一個金艾吉

游標滑過圖片的圖層動態

游標滑過圖片時，自上方滑入一滿版的半透明圖層

重點：

transform: skewY(-10deg); //Y軸傾斜
transform: skewY(10deg);
box-shadow: 0 30px 10px rgba(0, 0, 0, 0.1),
inset 0 0 20px rgba(0, 0, 0, 0.2); //內陰影

效果演示：

HTML：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>滑過圖片的覆蓋特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20210323">
    <div class="container">
        <div class="imageBox">
            <img src="https://fakeimg.pl/720x480/93CCC3/ffffff" alt="">
            <div class="textBox">
                <h1>游標滑過圖片的圖層動態</h1>
            </div>
        </div>
    </div>
</body>

</html>

CSS：

#dailycss_20210323 {
    background: #333;
    margin: 0;
    padding: 0;
}

#dailycss_20210323 .container {
    margin: 100px auto;
    width: 720px;
}

#dailycss_20210323 .imageBox {
    position: relative;
    overflow: hidden;
}

#dailycss_20210323 .imageBox img {
    width: 100%;

}

#dailycss_20210323 .textBox {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(200, 105, 135, 0.9);
    transition: 0.5s;
}

#dailycss_20210323 .textBox h1 {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}

#dailycss_20210323 .imageBox:hover .textBox {
    top: 0;
}

來源：