成品直播源码，图片放大且有渐变色罩层出现

<!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>5</title><br><style><br>.mask1,.text {<br>position: relative;<br>overflow: hidden;<br>width: 800px;<br>height: 500px;<br>transition: all .5s;<br>}<br> <br>            /*使图片片占满整个盒子*/<br> <br>img {<br>width: 100%;<br>height: 100%;<br>}<br> <br>            /*鼠标经过图片时，图片放大*/<br> <br>img:hover {<br>transform: scale(1.1);<br>}<br> <br>            /*先将遮罩层隐藏起来*/<br> <br>.mask1-1 {<br>display: none;<br>position: absolute;<br>top: 0;<br>left: 0;<br>width: 100%;<br>height: 100%;       <br>background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3));/*渐变色                        <br>                                                                               遮罩层*/<br>}<br>         /*在图片上完全遮罩为background:rgba(0,0,0,.5)*/<br> <br>.text:hover .mask1-1 {     /*鼠标经过图片，遮罩层显现*/<br>display: block;<br>}<br>.text:hover{<br>transform: scale(1.1);<br>}<br></style><br></head><br><body><br><div class="mask1"><br><div class="text"><br><img src="../images/nova9-pro.jpg" alt=""><br><div class="mask1-1"></div><br></div><br>        </div><br></body><br></html>