成品直播源码，图片放大且有渐变色罩层出现
<!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>
以上就是成品直播源码，图片放大且有渐变色罩层出现， 更多内容欢迎关注之后的文章
标签：遮罩,渐变色,100%,直播,源码,图片 From： https://www.cnblogs.com/yunbaomengnan/p/17759353.html