Implementation of adding a mask layer effect when the CSS mouse hovers over the image

First look at the effect:

When the mouse moves over the image, add shadow effect + text/icon

The key to implementation is CSS opacity and hover . This article also mainly introduces the implementation of the mask layer.
HTML:

<div class="img_div">
   <img src="item.image_base64" @click="deleteImg" class="imgCSS">
   <div class="mask">
     <h3><Icon type="ios-trash-outline" size="40"></Icon></h3>
   </div>
 </div>

CSS: [Deleted some codes not related to the implementation of the above picture]

I think the key code is
The parent element img_div should have display: block; position: relative;
Child element mask layer position: absolute; opacity: 0; pointer-events:none;
When the mouse is hovering, opacity: 1;
Others can be improved according to business needs

It should be pointed out that the purpose of pointer-events:none is to solve the problem that when there is an absolute positioning of the mask layer, clicking on the image cannot trigger an event, such as the deleteImg event in the code

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

This is the end of this article about how to implement the CSS mask layer effect when the mouse hovers over an image. For more relevant CSS mouse hover image mask layer content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!