将鼠标悬停在图像上时会出现一个按钮

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不透明度启动它。 与按钮相同。 然后在容器悬停时，您可以更改这些元素的不透明度以使其显示。 Transition属性可以很好地完成交互。

.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>