CSS 悬停时有 2 个过渡的图像效果

Question

对于处理 2 个过渡的 CSS 图像悬停效果，是否有合适且流畅的 CSS 解决方案：

使用背景颜色和不透明度使鼠标悬停时图像本身变亮
悬停时将播放按钮的不透明度设置为 100%

我的解决方案并不完美，播放按钮仍然闪烁且动画不流畅。我也在寻找跨浏览器解决方案...

请随意查看我的示例以及我在 https://codepen.io/marcusegger/pen/WNReBpa 中尝试的内容，因为它不是那么容易解释。

HTML:

<div class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <div class="imgContainer position-relative">
        <img src="https://cdn.pixabay.com/photo/2015/02/25/21/20/ipad-649499_1280.jpg" class="img-fluid" />
      </div>
    </div>
  </div>
</div>

CSS:

.imgContainer {
  background: #293D4F;
}

.imgContainer img  { 
    opacity: .25;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

img:hover {
    opacity: 1;
}

.imgContainer::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    content: url(https://www.daslandhilft.de/assets/img/play.svg);
    opacity: .5;
}

.imgContainer:hover::before {
    content: url(https://www.daslandhilft.de/assets/img/play.svg);
    opacity: 1;
}

Answer 1

您需要在 .imgContainer:hover::before 中设置 pointer-events: none，因为 'interferences' 具有其子元素 img 的 hover 属性。所以它应该是这样的：

.imgContainer {
  background: #293D4F;
}

.imgContainer img  { 
    opacity: .25;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

img:hover {
    opacity: 1;
}

.imgContainer::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    content: url(https://www.daslandhilft.de/assets/img/play.svg);
    opacity: .5;
}

.imgContainer:hover::before {
    content: url(https://www.daslandhilft.de/assets/img/play.svg);
    opacity: 1;
    pointer-events: none;
}

CSS 悬停时有 2 个过渡的图像效果

CSS image effect with 2 transitions on hover

css

css-transitions