设计一个样式出来，鼠标移到图片的上方会有蒙层出现，并且会显示两个按钮出来

好的，我来设计一个样式，如下所示：

HTML代码：

<div class="image-container">
  <img src="your-image-url" alt="your-image-description">
  <div class="overlay">
    <button class="btn btn1">按钮1</button>
    <button class="btn btn2">按钮2</button>
  </div>
</div>

CSS代码：

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

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .overlay {
  opacity: 1;
}

.overlay button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}

.overlay .btn1 {
  margin-top: 50%;
  transform: translateY(-50%);
}

.overlay .btn2 {
  margin-top: 10px;
}

在上述代码中，我们创建了一个包含图片和蒙层的容器。当鼠标移到容器上时，蒙层的透明度变为1，即显示出来。蒙层中包含两个按钮，分别是“按钮1”和“按钮2”。这些按钮都是在蒙层内部居中显示的，并且“按钮1”在垂直方向上居中，而“按钮2”则在“按钮1”的下方。当鼠标移开容器时，蒙层的透明度变为0，即隐藏起来。