使用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 Link：

https://jsfiddle.net/ot8a5oba/

你可以看到宽度和高度也令我感到困惑 - 我不确定如何确保它保持相同的大小，并且它显示在顶部。提前致谢！

Answer 1

我会这样做，使用伪元素来应用叠加层。简化了一些事情。

＆＃13;

＆＃13;

.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;
}
*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;