Css 将图像悬停在淡入淡出位置

我有一个图像，当你把鼠标放在上面时，我有另一个显示的div。我正试图让它慢慢淡入淡出，但迄今为止我所尝试的一切都没有奏效。任何帮助都将不胜感激。谢谢

.image{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
宽度：100%；
}
.覆盖{
显示：无；
}
.image:hover.overlay{
框大小：边框框；
显示：块；
身高：100%；
左：0；
-moz框大小：边框框；
位置：绝对位置；
排名：0；
-webkit框大小：边框框；
宽度：100%；
}

将覆盖不透明度设置为0，然后悬停设置为1，并添加过渡规则：

html，正文{
身高：100%；
保证金：0；
}
.覆盖{
不透明度：0；
过渡：不透明度。6秒缓解；
身高：100%；
}
.覆盖：悬停{
不透明度：1；
}

脸谱网
亚马逊

您需要过渡和不透明度：

.image{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
宽度：100%；
}
.覆盖{
不透明度：0；
过渡时间：200ms；
}
.image:hover.overlay{
框大小：边框框；
显示：块；
身高：100%；
不透明度：1；
左：0；
-moz框大小：边框框；
位置：绝对位置；
排名：0；
-webkit框大小：边框框；
宽度：100%；
}

我去掉了display:none和带有内容显示的隐藏div。现在看看这个网站。将鼠标悬停在图像上@Jessie Williamsn我不确定你所追求的对该网站的影响，但请看以下答案：。您不能将

转换

与

显示：无

一起使用。我只是希望它淡入淡出的速度较慢。谢谢SYMLINK非常感谢我在你发给我的链接上找到了它。请同时提供标记部分。