Fade In Out with Hover Effect

Question

I need both of the images(ghost & butterfly) to have fade in and out effect. When I hover on the first image(ghost), I need some text to pop out. I managed to do that effect.

However, when I applied the fade in out animation transition to both images, the first image's(ghost) text is not appearing anymore.

The second image(butterfly) needs to have the same effect as the first image; which are the fade in out and hover effect.

This is the sample that I managed to do from JSFIDDLE

Here is the fade in out transition that I tried experimenting with:

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

Also, I need both images to be on top of each other. After the first image fade out, the second image should fade in on the same position (overlapping).

Many thanks in advance.

Answer 1

Also, I need both images to be on top of each other. After the first image fade out, the second image should fade in on the same position (overlapping).

In order to achieve this, you could simply set the second image in display:none; and when your first image is done fading out, you set it to display:none; and set the second image to display:block;

You can also use absolute positionning.

Concerning your animation problem now, is it the image or the text you would like to animate, and if it's the image, which event is supposed to trigger it ?

Also, could you add the functionning animation into your JSFiddle please ?