html - CSS 图像叠加在悬停时淡入

Question

我一直在尝试创建以下内容:显示图像，当鼠标悬停在图像上时，图像上会显示分数，分数会淡入。我几乎就在那里，除了部分淡出。

我的 CSS:

.profile-image10 {
  opacity: 1;
}

.profile-image10:hover .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 510px;
  top: 8px;
  z-index: 2;
  background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
  opacity: 0.1;
}

<div class="profile-image10">
  <a href="#"><img src="https://www.w3schools.com/howto/img_fjords.jpg" /></a>
  <span class="overlay"></span>
</div>

我创建了这个 fiddle : https://jsfiddle.net/1wusom4m/

如您所见，它目前在悬停时会淡出，这与我想要的相反。所以当然不透明度的设置是错误的，但如果我在 .profile-image10 中将它设置为较低的值，它也会影响原始图像。我对此很陌生，所以为了走到这一步已经做了很多实验，但我现在被困住了。那么，当鼠标悬停在图像上时，如何让它在乐谱中淡出呢？还是我处理这一切都错了？

Answer 1

三件事。

1. 不要依赖于 :hover 状态下的叠加层的所有样式属性。只有那些你想在图像的 :hover 上更改。

2. 始终为原始状态定义 transition 属性。您可以通过在 :hover 状态上额外指定它来更改反向过渡。

3. div 是一个 block 级元素，默认情况下它会占用尽可能多的水平空间。将 :hover 放在 div 上会导致淡入淡出效果被触发，即使您将鼠标悬停在图片右侧(这可能是不需要的)。

.profile-image10 .overlay{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 585px;
  top: 8px;
  z-index: 2;
  background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

.profile-image10 a:hover + .overlay {
  opacity: 1;
}

<div class="profile-image10">
  <a href="#"><img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" /></a>
  <span class="overlay"></span>
</div>

fiddle :https://jsfiddle.net/1wusom4m/3/