成品直播原始碼，圖片放大且有漸變色罩層出現

zhibo系統開發發表於2023-10-12
原始碼

成品直播原始碼，圖片放大且有漸變色罩層出現

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5</title>
<style>
.mask1,.text {
position: relative;
overflow: hidden;
width: 800px;
height: 500px;
transition: all .5s;
}
 
            /*使圖片片佔滿整個盒子*/
 
img {
width: 100%;
height: 100%;
}
 
            /*滑鼠經過圖片時，圖片放大*/
 
img:hover {
transform: scale(1.1);
}
 
            /*先將遮罩層隱藏起來*/
 
.mask1-1 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;       
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3));/*漸變色                        
                                                                               遮罩層*/
}
         /*在圖片上完全遮罩為background:rgba(0,0,0,.5)*/
 
.text:hover .mask1-1 {     /*滑鼠經過圖片，遮罩層顯現*/
display: block;
}
.text:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="mask1">
<div class="text">
<img src="../images/nova9-pro.jpg" alt="">
<div class="mask1-1"></div>
</div>
        </div>
</body>
</html>


以上就是成品直播原始碼，圖片放大且有漸變色罩層出現， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2988511/，如需轉載，請註明出處，否則將追究法律責任。

相關文章