How to Activate a Gif by hover (SOLVED)

I know that gifs cannot be stopped or started by just hovering over it. I have already created 2 versions of the gif: the first being a jpeg of the first frame of the gif and the second is the animated gif itself.
I’ve already coded and placed the images to where the gif will display on top of the jpeg once the mouse enters the space but the problem that I’m having is that the gif is already playing once the page loads. Whenever I scroll over the jpeg it quickly jumps to where the frame of the gif is already playing.

I have tried manually setting the parameters to retrieve the gif from the media library but unfortunately, it does the same thing.

Any help would be greatly appreciated!

Update, I’ve finally solved what was going wrong

The manual parameters to retrieve the gif from the media library were within the gif’s event handler. To solve the problem I placed an identical jpeg on top of the initial jpeg and retrieved the gif from the media library to replace that image.

Justin, Can you help me through this process? I have the first image and the gif behind. How do I make the first image disappear and the gif become active?

First you need to select the hover box. so you need to make sure that your first image and the first frame of the gif are the same. shoot for a short gif because once the gif starts playing it won’t stop. it should work, but if your gif is playing before you hover, it’s a bug within Wix. Just reload your editor and try again. You can mine working at https://www.alcala.design/design

@justinalcala97 , I was able to hide the first image but by the time I got to the gif it had already played. This gif is one time through similar to your “work hard” billboard. I am not able to figure out how to call the gif only when the first image has been hidden.