Html 悬停离开后Css不会平滑淡入

我正试图让这张图片在悬停离开后平滑地淡入，但它似乎刚刚弹回来，我希望过渡看起来平滑，并在淡入淡出时以同样的方式混合在一起

我可能对css有点过火了，但我的主要目标是让第一个div是一个图像，第二个div是一个有相关信息的背景

.imageInfo{
显示：块；
位置：绝对位置；
底部：5px；
左：15px；
颜色：黑色；
字体风格：斜体！重要；
字体大小：较小；
}
.imageContainer{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
左边距：15px；
边缘底部：20px；
最小宽度：330px；
高度：150像素；
}
.cImage{
最大宽度：400px；
最小高度：130px；
宽度：100%；
身高：100%；
填充物：5px；
垂直对齐：中间对齐；
}
imageContainer.img{
宽度：自动；
显示：内联块；
}
.imageContainer img.play，
.imageContainer img.picture，
.imageContainer img.fade{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
过渡：缓进缓出0.6s；
}
.imageContainer img.play{
不透明度：1；
能见度：可见；
}
.imageContainer:悬停img.play{
不透明度：0；
可见性：隐藏；
}
.imageContainer分区图片{
不透明度：0；
可见性：隐藏；
}
.梯度{
背景图像：线性渐变（顶部、橙色、红色）；
}
.imageContainer分区图片.淡入淡出{
不透明度：0；
可见性：隐藏；
}
.imageContainer:悬停分区图片{
不透明度：1；
能见度：可见；
}
.imageContainer:悬停div.picture.fade{
不透明度：1；
能见度：可见；
}

婴儿尤达
日期：“1999年1月1日”

不幸的是，没有一种真正的方法（至少我知道）让它在鼠标离开时淡入，而不是在鼠标加载时淡入。所以，我只是让它与显示动画一起加载，并放置在一个“加载…”上，随着图像的出现而逐渐消失。很抱歉，我不能用你的代码修改它，因为我不能完全理解它，所以我创建了自己的代码。调整它以填充您的代码：

img{
位置：绝对位置；
宽度：100%
身高：100%；
z指数：1；
动画名称：show；
动画持续时间：1s；
}
img：悬停{
动画名称：淡入淡出；
动画持续时间：1s；
不透明度：0；
}
#嗨{
背景颜色：绿色；
}
#装载{
不透明度：0；
位置：绝对位置；
z指数：2；
字体大小：20px；
文本对齐：居中；
动画名称：淡入淡出；
动画持续时间：1s；
}
@关键帧淡入淡出{
从{opacity:1；}
到{不透明度：0；}
}
@关键帧显示{
从{opacity:0；}
到{opacity:1；}
}

不透明度动画测试

加载

日期：2010年1月1日

---

使用

src

而不是

[src]

。将

更改为

.imageInfo{
显示：块；
位置：绝对位置；
底部：5px；
左：15px；
颜色：黑色；
字体风格：斜体！重要；
字体大小：较小；
}
.imageContainer{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
左边距：15px；
边缘底部：20px；
最小宽度：330px；
高度：150像素；
}
.cImage{
最大宽度：400px；
最小高度：130px；
宽度：100%；
身高：100%；
填充物：5px；
垂直对齐：中间对齐；
}
imageContainer.img{
宽度：自动；
显示：内联块；
}
.imageContainer img.play，
.imageContainer img.picture，
.imageContainer img.fade{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.imageContainer img.play{
不透明度：1；
能见度：可见；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.imageContainer:悬停img.play{
不透明度：0；
可见性：隐藏；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.imageContainer分区图片{
不透明度：0；
可见性：隐藏；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.梯度{
背景图像：线性渐变（顶部、橙色、红色）；
}
.imageContainer分区图片.淡入淡出{
不透明度：0；
可见性：隐藏；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.imageContainer:悬停分区图片{
不透明度：1；
能见度：可见；
过渡：不透明度0.6s线性，可见性0.6s线性；
}
.imageContainer:悬停div.picture.fade{
不透明度：1；
能见度：可见；
过渡：不透明度0.6s线性，可见性0.6s线性；
}

婴儿尤达
日期：“1999年1月1日”

我添加了一段我的意思。容器中应该有一个初始图像。当用户悬停时，它应该淡出，背景div应该淡入。当他们离开时，背景图像淡出，原始图像需要淡入。这已经发生了。我也给它添加了背景色。好的，谢谢你这么做，但是如果你注意到闪光灯，当你离开容器的时候问题仍然存在。我不想那样。我想它淡入淡入图像一旦你离开悬停，它需要混合，这样你就可以看到过渡发生。目前，这种转换仅在背景图像淡入淡出时发生in@CodeMan03我编辑了我的ans。检查它是否解决了您的问题。