hover 遮罩

作者: 且听风吟_792d | 来源:发表于2020-04-13 11:48 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .img_div {
           margin: 20px 400px 0 400px;
           position: relative;
           width: 531px;
           height: 354px;
       }

       .mask {
           position: absolute;
           top: 0;
           left: 0;
           width: 531px;
           height: 354px;
           background: rgba(101, 101, 101, 0.6);
           color: #ffffff;
           opacity: 0;
       }

       .mask h3 {
           text-align: center;
       }

       .img_div a:hover .mask {
           opacity: 1;
       }
   </style>
</head>

<body>
   <div class="img_div">
       <img src="http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg">
       <a href="#">
           <div class="mask">
               <h3>A Picture of food</h3>
           </div>
       </a>
   </div>
</body>

</html>