css遮罩层

白泽的笔记

已于 2022-07-26 19:32:49 修改

阅读量241

点赞数

文章标签：前端 javascript html

于 2022-07-01 20:46:11 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/125565509

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;

}

           img {
               width: 300px;
               height: 300px;
               /* vertical-align: middle; */
           }

           ul {
               /* list-style: none; */
               /* list-style-type: circle;空心圆 */
               /* list-style-type: square;正方形 */
               /* list-style-position: outside;列表标记在外面 */
               /* list-style-position: inside;列表标记在内侧 */
               /* list-style-image:url('img/矩形11.png');图片 */
               list-style: none;
           }

           .clearfix::after {
               content: "";
               clear: both;
           }

           .list {
               width: 640px;
               margin: 0 auto;
           }

           .list li {
               float: left;
               width: 300px;
               margin: 10px;
               position: relative;
               /* overflow:hidden; */
           }

           .list li .mask {
               position: absolute;
               top: -300px;
               /* left: -300px; */
               width: 300px;
               height: 300px;
               background-color: rgba(0, 255, 255, 0.3);
               transition: .3s;
           }

           .list li:hover .mask {
               /* left: 0px; */
               top: 0px;
           }
       </style>
   </head>
   <body>
       <ul class="list ">
           <li><a href=""><img src="img/07.jpg" alt=""></a>
               <div class="mask"></div>
           </li>
           <li><a href=""><img src="img/08.jpg" alt=""></a>
               <div class="mask"></div>
           </li>
       </ul>
   </body>
</html>