当鼠标悬停在图像上时，如何显示一个按钮

Question

我有一张图片，希望当鼠标悬停在图片上方时，会出现一个略带透明度的黑色背景覆盖整个图片，并且在图片顶部出现一个按钮。目前，我已经将按钮放在了预期位置，但是我无法让它在鼠标悬停时消失或出现。

<div class="container">
   <img src="img_snow.jpg" alt="Snow">
   <button class="btn">Button</button>
</div>

.container {
    position: relative;

    button {
       position: absolute;
       top: 60%;
       left: 50%;
       transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
    } 

 button:hover {
    background-color: black;
  }
}

img {
   background-image: url(${({ src }) => src});
   background-repeat: no-repeat;
   background-size: cover;


   &:hover {
      background-color: #000;
      opacity: 0.5;
  }
}

- alo gon

Answer 1

我在 .container 元素上使用了一个带有不透明度背景颜色的伪元素。与其在图像上悬停，我在容器上悬停时显示按钮。

.container {
    position: relative;  
    width:100%;
    max-width:100px;
}
.container:before {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;left:0;right:0;
  background-color:rgba(0,0,0,0);
}
.container:hover::before {
  background-color:rgba(0,0,0,0.5);
}
.container img {
  display:block;
}
.container button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity:0;
} 
.container:hover button {   
  opacity: 1;
}

<div class="container">
  <img src="http://placeimg.com/100/100/animals" alt="Snow">
   <button class="btn">Button</button>
   
</div>

- WizardCoder

---

我会点赞你的回答，因为我认为伪元素比下面我演示的方法中多余的“container-shade”元素更加简洁。我认为同时使用容器和图像可能是多余的，并且通常display/visibility > opacity。 - Grant Noe

Answer 2

在容器上使用伪元素，将其不透明度设置为0。按钮也是同样的操作。当鼠标悬停在容器上时，更改这些元素的不透明度以显示它们。过渡属性可以为交互效果增添美感。

.container:before {
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
}
.container:hover:before {
  opacity: 1;
}

同时按钮也是同样的道理：

.btn {
  opacity: 0;
}
.container:hover .btn {
  opacity: 1;
}

.container {
  position: relative;
  width: 400px;
  height: 220px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container:before {
  /* empty pseudo */
  content: '';
  
  /* start transparent, include a transition bcuz */
  opacity: 0;
  transition: opacity 0.5s ease;
  
  /* covers the whole div */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.container:hover:before {
  opacity: 1;
}
.container img {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
  z-index: 1;
}

.btn {
  opacity: 0;
  transition: opacity 0.5s ease;
  position: relative;
  padding: 0 40px;
  height: 40px;
  line-height: 40px;
  max-width: 260px;
  cursor: pointer;
  z-index: 3;
}
.container:hover .btn {
  opacity: 1;
}

<div class="container">
  <img src="https://picsum.photos/400/220" alt="Snow">
  <button type="button" class="btn">Click Me</button>
</div>

- BugsArePeopleToo

Answer 3

有许多潜在的解决方法，所以请注意这只是其中之一：

最初的回答

.container {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  position: relative;
  background-image: url("img_snow.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.container-shade,
.container-button {
  display: none;
  position: absolute;
}

.container-shade {
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

.container-button {
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container:hover > .container-shade,
.container:hover > .container-button {
  display: block;
}

<div class="container">
  <div class="container-shade"></div>
  <input type="button" value="button" class="container-button">
</div>

淡蓝色的背景仅用于演示目的，但您可以了解到这个想法。

此外，我使用容器来“容纳”图像，而不是图像元素。无论如何，您都在使用CSS做同样的事情。

最初的回答

- Grant Noe