CSS过渡失效求助：悬停时图片渐变消失无过渡动画

看起来你遇到的核心问题是渐变元素的过渡动画没有绑定到正确的目标上——很多时候我们会把渐变加在伪元素上，但只给父容器加了transition，这就导致动画触发不了。我来帮你一步步修复：

先分析常见的错误原因 #

你的代码里只给.tinted-image加了过渡，但如果渐变是通过伪元素（比如::before/::after）实现的，那么过渡属性必须加到伪元素本身上，因为过渡是作用在属性发生变化的那个元素上的。另外，如果你是直接把渐变和背景图写在同一个background属性里，用all过渡可能因为属性替换太生硬而不生效。

正确的实现方案 #

我们把背景图和渐变分离，用伪元素承载渐变，这样过渡动画就能精准触发：

HTML（保持你的结构不变）

<a href="http://calvarygigharbor.com/heavenly-hitters/">
  <div class="tinted-image"></div>
</a>

CSS（修复后的版本）

.tinted-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  /* 把背景图放在父容器 */
  background: url('你的图片URL') center/cover no-repeat;
}

/* 用伪元素添加渐变遮罩 */
.tinted-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 示例渐变，你可以替换成自己的 */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  /* 给伪元素加过渡！这是关键 */
  transition: opacity 0.7s ease;
  /* 兼容旧版webkit浏览器 */
  -webkit-transition: opacity 0.7s ease;
}

/* 悬停时让渐变消失 */
.tinted-image:hover::before {
  opacity: 0;
}

为什么这样能生效？ #

1. 分离背景和渐变：父容器负责显示图片，伪元素单独负责渐变遮罩，逻辑更清晰。
2. 过渡绑定到伪元素：渐变的透明度变化发生在::before上，所以过渡属性必须加在这里，动画才能被正确触发。
3. 使用可过渡属性：opacity是支持平滑过渡的属性，比直接修改background或者用display: none靠谱得多。

额外检查点 #

• 如果你的渐变是写在父容器的background里（比如background: linear-gradient(...), url(...)），那悬停时需要修改background的渐变部分，但这种方式过渡效果不如伪元素流畅，更推荐上面的分离方案。
• 确保没有其他CSS规则覆盖了你的过渡属性（比如!important或者更高优先级的选择器）。

内容的提问来源于stack exchange，提问作者Rebekah Parkhurst