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!