游標滑過圖片的圖層動態
游標滑過圖片時,自上方滑入一滿版的半透明圖層
重點:
- 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; }
來源:
迴響列表
目前還沒有任何留言
留言表單