javascript - How to make a div hide properly on hover while trying to make a gif also start on hover -

I am very new to coding and have put together some things together. I am trying to start the Hover GIF. The original image is stable and when you start playing GIF starts. I'm fine at this job, but I want an overlay on the static image, like "hover me" button, essentially when I hover over the overlay, it can not start GIF since I'm not running on static image . When I display a hover: None for the overlay, it's just flickr.

Here's a link I've done so far:

  & lt; Div class = "container" & gt; & Lt; Div class = "overlay" & gt; Test & lt; / Div & gt; & Lt; Img src = "http://fdfranklin.com/gif1.jpg" alt = "" id = "static" & gt; & Lt; / Div & gt;  

(How to show CSS / JS in stackoverflow, this is a JSFDL link)

If you overlay the div gif properly Plays on the hinge I essentially want it just as you want, you hang out and overlay fade and start playing gif.

Any thoughts? All help, much appreciated.

You never hide the overlay div, and therefore do not run gif when you overlay hover If you are a beginner then just start for:

  $ (document) .ready (function () {$ (".overlay"). Hover (function () {$ ('# Attr (" Src "," http://i.imgur.com/ytWYljT.gif ");}, function () {$ ('# static'). Attr (" src "," http: //fdfranklin.com/gif1 .jpg ")});});