手写遮罩层优化

.img_div {
			    border-radius: 10px;
			    display: block;
			    position: relative;
				width: 600px;
				height: 600px;
			  }
			  .imgCSS {
			    height: 300px;
			    width: 300px;
			    border-radius: 10px;
			    display: block;
			    cursor: pointer;
			  }
			   .mask {
			   position: absolute;
			   background: rgba(101, 101, 101, 0.6);
			   opacity: 0;
			   top: 0;
			   right: 0;
			   width: 100%;
			   height: 300px;
			   border-radius: 10px;
			   text-align: center;
			   margin: 0 auto;
			   pointer-events:none;
			 }
			  
			  .img_div:hover .mask {
			    opacity: 1;
			  }

<div class="img_div" onclick="deleteImg()" >
		   <img src="./企业微信截图_16638130326514.png" class="imgCSS ">
		  <div class="mask">
				玩味
		   </div>
		 </div>

效果如下

做简单修改：

.img_div {
			    border-radius: 10px;
			    display: block;
			    position: relative;
				width: 600px;
				height: 600px;
			  }
			  .imgCSS {
			    height: 300px;
			    width: 300px;
			    border-radius: 10px;
			    display: block;
			    cursor: pointer;
			  }
			   .mask {
			   position: absolute;
			   background: rgba(101, 101, 101, 0.6);
			   opacity: 0;
			   top: 0;
			   right: 0;
			   width: 100%;
			   height: 300px;
			   border-radius: 10px;
			   text-align: center;
			   margin: 0 auto;
			   pointer-events:none;
			 }
			  
			  .img_div:hover .mask {
			    opacity: 1;
			  }

 效果如下：

这两个使用场景不同 第二种对应的文字也可以设置hover