Streaming live at 10am (PST)

Rollover Still Image to Animated GIF

I’m seeking a solution for creating rollover animations in the form of still image to animated gif.

Currently the only work-around I’ve been able to come up with is the following:

  • I took two images of the same size, a still .png and an animated .gif,
    and I stacked them using absolute positioning. (The gif plays continuously in the background, but the viewer can’t see it because the still image covers it.)

  • On hover the still image becomes hidden (0% opacity), revealing the animated gif underneath.

The problem is that the gif plays continuously in the background, and when the still image is hidden the gif could be at any point in the animation.

What I need is for the gif to be triggered upon rollover, so that the animated gif starts from the beginning every time that the image is rolled over. And I need to do this for an entire gallery of images.

What are some alternative solutions for a rollover still-to-animated-gif for someone with very little coding experience?

Many thanks!

1 Like

If you want the GIF to play from the beginning, you will have to replace the source file on the trigger, and set it to an empty string on exit. This can only be done in JavaScript.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.