The image implements a mouse-over mask layer and a masking layer. The image component is used in the element's table to implement preview amplification, which solves the problem of icon blocking the image preview amplification event.

Requirement: When using the image preview function in the table component of element, a mask layer or masking layer effect is provided when the mouse hovers the image to optimize user interaction.

1. Reference the image picture to set the magnification attribute and preset the icon icon

 //给最大的盒子设置 class
 <div  class="img-box">
    //导入 element 的 image组件
    <div>
      <el-image :preview-teleported="true" style="width: 75px; height: 75px" class="images"
      :hide-on-click-modal=true src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
      :zoom-rate="1.2"
      :preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
      :initial-index="1" fit="cover" >
      </el-image>
     </div>

    // 使用 element 中查看 icon ，可自定义图片
     <el-icon  class="icon-box" >
        <View />
     </el-icon>
</div>

Current effect:

2. Implement the hover mask layer and masking layer of the box.

.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  //父级设置 相对定位，让 icon设置绝对定位时能够以该父级为准。
  position: relative;
  // icon 设置 绝对定位 让其固定在你想要的合适位置。 样式可调整，自己定位即可。
  .icon-box {
    display: none;
    position: absolute;
    top: 35%;
  }
}
// 设置鼠标悬浮时的效果
.img-box:hover {
  // 给图片设置样式
  .images{
    background: #000;
    img {
      // 图片设置 透明度，让背景黑色呈现出来。
      opacity: 0.6;
    }
     //这个可忽略，为了
    .el-image-viewer__canvas > img {
      opacity: 1;
    }
  }
  // 给 icon 设置样式，.el-icon 是组件自带的类名。
  .el-icon {
    display: inline-block;
    color: #fff;
  }
}

Rendering:

3. Solve the problem of click preview event when icon blocks the picture.

The image preview zoom event of image in element is not implemented through additional variables, so we will encounter a problem when making mask layers and masking layers. How do you add additional icons to the masking layer? Then this The icon will block the original image preview zoom event.

In fact, if you don't mind the trouble, you can use the dialog box in element to achieve the effect of enlarging the image in conjunction with the image display, and this problem of occlusion events will not occur.

Here, you can solve the problem of icon occlusion by using the built-in amplification event of element. It can be solved in one sentence, giving you the css settings of the icon:

//在你的 icon 盒子遮挡 image放大事件的元素上，添加该 css 属性。
pointer-events:none

The pointer-events attribute is used to control how the element responds to mouse or touch events. When set to none, the element does not respond to mouse or touch events, but other elements in the content area can respond to mouse or touch events to achieve the event penetration effect.