Search code examples
htmlcssimagewebanimated-gif

Display image on top of gif


I have a gif centered in the a middle of a webpage. Once the gif stops playing I want to display three icons on top of the gif and have them light up when users hover over them. How do go about coding the images so they are visible only when the gif has completed loaded/played? Is it possible to do this without javascript?


Solution

  • This has been discussed in a this post which in turn directs to more answers. I agree with Shikkediel that the right way to approach this is with js so you can access a timeout and bind hover events to your new icons. You can also use js to manipulate the opacity or display properties of each element which will also help you accomplish your goal.