给el-image添加hover遮罩层，可自定义按钮

可以使用CSS的:hover伪类来实现给el-image添加hover遮罩层，同时可以在遮罩层上添加自定义按钮。具体实现方法可以参考以下代码：

HTML代码：

<div class="image-container">
  <el-image src="your-image-url"></el-image>
  <div class="overlay">
    <button>自定义按钮</button>
  </div>
</div>

CSS代码：

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: ;
  left: ;
  width: 100%;
  height: 100%;
  opacity: ;
  transition: opacity .3s ease;
  background-color: rgba(, , , .5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay:hover {
  opacity: 1;
}

button {
  padding: 10px 20px;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  color: #333;
  font-size: 16px;
  cursor: pointer;
}

在上面的代码中，我们首先创建了一个包含el-image和遮罩层的容器，然后使用CSS的position属性将遮罩层定位到容器的左上角，并设置其宽度和高度为100%。我们还设置了遮罩层的opacity属性为，这样在默认情况下它是不可见的。当鼠标悬停在容器上时，我们使用:hover伪类将遮罩层的opacity属性设置为1，这样它就会变得可见。最后，我们在遮罩层上添加了一个自定义按钮，用于执行其他操作。