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;
  }
}

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>

Answer 2

有很多潜在的方法可以解决此问题，因此请注意，这只是其中一种：

.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做同样的事情。

Answer 3

在容器上使用伪元素，并从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>

将鼠标悬停在图像上时会显示一个按钮

3 个答案: