Hello ,

I’m a new user on Unbounce and creating my first landing page.

In my page I have multiple animated Gifs, since they need to be side by side, I want only one to animate at one point in time so other animations do not distract the user.

I am able to overlay another image and via CSS do the hover to transparent effect so the image below becomes visible. But the problem with this approach is that the animated Gif underneath could be half way through the animation when the user hovers on the overlay.

I’d much prefer that the animated Gif starts sequence when I hover on the overlay image.

I tried changing the image itself on hover but it did not do anything.

#lp-pom-image-107:hover {

           src: url("voicecomand.gif") no-repeat;

}

Is it possible to reference the image I uploaded via CSS ? Is there any other approach I can try ?

P.S. - I could host the GIFs on another Server/AWS/Azure and reference that URL to see if that works. But I would much rather prefer to stay with Unbounce URLs for simplicity sake.

Thanks,

Pankaj