游標移入圖層動態

游標滑過圖片的圖層動態

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

重點:

  1. transform: skewY(-10deg); //Y軸傾斜
    transform: skewY(10deg);
  2. 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;
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

留言支持 Markdown 格式





關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸
文章分類
Social Accounts