如何在鼠标悬停时显示按钮

Question

当用户将鼠标悬停在图像上方时，我正在尝试在图像上方显示按钮元素。

我想要的结果是这样的：

这是我到目前为止的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" style="background-image:url(https://i.imgur.com/fZ3S5qJ.jpg);background-size: 100% 100%;height: 400px;"></div>  
    <div class="col-md-6" style="background-image:url(https://i.imgur.com/jTFqukV.jpg);background-size: 100% 100%;height: 400px;"></div>
  </div>
</div>

Answer 1

您可以做一些like this：

a {
  display: none;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.btn-like {
  display: block;
  border: 1px solid #FFF;
  padding: 5px;
  color: #FFF;
}

.col-md-6:hover a{
  display: flex;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" style="background-image:url(https://i.imgur.com/fZ3S5qJ.jpg);background-size: 100% 100%;height: 400px;">
          <a href="https://google.com"><span class="btn-like">Buy now</span></a>
    </div>

    <div class="col-md-6" style="background-image:url(https://i.imgur.com/jTFqukV.jpg);background-size: 100% 100%;height: 400px;">
          <a href="https://google.com"><span class="btn-like">Buy now</span></a>
    </div>
  </div>

</div>