Hover 使用悬停效果淡入淡出

我需要两个图像（鬼和蝴蝶）有淡入淡出的效果。当我将鼠标悬停在第一个图像（ghost）上时，我需要一些文本弹出。我设法做到了这一点

但是，当我将淡入淡出动画过渡应用于两个图像时，第一个图像的（重影）文本不再显示

第二个图像（蝴蝶）需要与第一个图像具有相同的效果；这是淡入淡出和悬停效果

这是我设法从中得到的样本

下面是我尝试过的淡入淡出转换：

.tooltip-wrap{
    -webkit-animation:fadeInOut 5s;
    opacity:0;
    -moz-animation-delay: 32s;
    -webkit-animation-delay: 32s;
    -o-animation-delay: 32s;
    animation-delay: 32s;
}

另外，我需要两个图像在彼此的顶部。第一幅图像淡入后，第二幅图像应在相同位置淡入（重叠）

非常感谢

另外，我需要两个图像在彼此的顶部。第一幅图像淡入后，第二幅图像应在相同位置淡入（重叠）

为了实现这一点，您可以简单地在display中设置第二个图像：none；当您的第一个图像淡出后，您将其设置为显示：无；并将第二图像设置为显示：块

也可以使用绝对定位

关于你现在的动画问题，是你想要动画的图像还是文本，如果是图像，应该触发哪个事件

---

另外，您可以将函数动画添加到您的JSFIDLE中吗

这是更新后的小提琴-我无法设置显示：无，因为第一张图像根本没有出现。我怎样才能解决这个问题？它们都应该设置动画以淡出。将鼠标悬停在图像上时，文本应显示出来。大约3秒钟后，图像和文本都会淡出，下一幅图像会淡入。第一幅图像不会出现，因为它被设置为不透明度：0；你的动画有多个问题！首先，它根本不是从我所看到的启动，我也不是CSS动画的专家，但我认为你应该用@keyframe声明它，就像这里解释的那样->接下来，你可以使用“display:block；”和“display:none；”来显示和隐藏你的文本。问题是，显示：无；完全删除场景中的元素，因此动画将永远不会启动。您应该在文本上使用不透明度0！