html - 使用 CSS 将图像悬停在图像上

Question

我知道之前有人问过这个问题(here 和 here)，但出于某种原因，我无法在使用相同技术时使用我的方法。基本上当你将鼠标悬停在上面时，

你应该得到这个:

顺便说一下，如果有更简单的方法可以在悬停时不加载新图像来执行此操作，请告诉我。

这是我尝试过的:

HTML

<div class="image">
<a href="#">
<img class="image" src="wp-content/themes/TheBullshitCollection/Images/bs-1.jpg">
</a>
</div>

CSS

.image {
width: 100%;
margin-right: 28px;
margin-bottom: 28px;
display: inline-block;
}

.image a:hover {
display:block;
background-image:url("/wp-content/themes/TheBullshitCollection/Images/bs-1.5.jpg");
margin-right:28px;
margin-bottom:28px;
transition: all 0.2s ease-in-out;
position: absolute;
z-index:1;
width: 100px;
height: 120px;
}    

JS fiddle 链接:

https://jsfiddle.net/ot8a5oba/

您可以看到宽度和高度也让我感到困惑 - 我不确定如何确保它保持相同的大小，并且它出现在顶部。提前致谢!

Answer 1

我会像这样使用伪元素来应用叠加层。大大简化了事情。

.imageContainer a {
  width: 100%;
  display: inline-block;
  position: relative;
}

.imageContainer a:after {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(139,69,19,0.5);
  content: 'Buy';
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font: 5em cursive;
  opacity: 0;
  transition: opacity .5s;
}

.imageContainer a:hover:after {
  opacity: 1;
}

.imageContainer img {
  max-width: 100%;
  vertical-align: top;
}

/*
.image a:hover {
  display: block;
  background-image: url("http://i.imgur.com/ARiA0ua.jpg");
  margin-right: 28px;
  margin-bottom: 28px;
  transition: all 0.2s ease-in-out;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 120px;
}
*/

<div class="imageContainer">
  <a href="#">
    <img class="image" src="http://i.imgur.com/F2PaGob.jpg">
  </a>
</div>