restart animated gif on hover css

Question

I have a animated gif as a background image which is activated when you hover a link. But once activated it just keeps on playing even though you're not hovering the link and even though it isn't visible. Are there any ways to restart the gif every time you hover over the link, using css only?

Here is my code so far

<div id="zichtbaar">
<a href="?link?">Zichtbaar<span></span></a>

and the CSS

#zichtbaar a span { 
display: none; 
background-image: url("background.gif");
background-size: contain;
background-position: fixed;
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 100%;
left: 25%;
top: 35px;
z-index:-9999;                                              
#zichtbaar a:hover span { 
display:block;  
}

how is it activated on `:hover`? I don't see any code for that. — Michael Coker, Jun 30 '17 at 16:57

frenchie · Answer 1 · 2017-07-04T18:42:53.977

2

I'd create a second image, a still in .png format, and would change the source of the image on :hover so that when the user hovers the image, the source is the animated gif, and when he mouses out, the source is replaced with the still image and that would visually reset the image. Something like this:

#zichtbaar a span { 
background-image: url("StillImageOfTheGif.png");
}

#zichtbaar a span :hover { 
background-image: url("background.gif");
}

In addition, I'd add an <img> element of the still .png image with a hidden attribute so that the image loads when the page loads and thus avoid a delay when the user triggers the hover.

Edit based on comments and javascript version.

<a id="zichtbaar">Zichtbaar</a>
<img id="DasBild" src="https://jepen84.github.io/github.io/images/static_ice.gif" />

function Start() {

    $('#zichtbaar').on({

    mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
    mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.gif') }

  });
}

$(Start);

edited Jul 04 '17 at 18:42

answered Jun 30 '17 at 17:08

frenchie

48,391
102
295
498

I tried that, but it doesn't restart the animation. The animation is a piece of text the gets written out, and when you hover over the link the first time, it gets the animation going, but when you hover over again you just resume the animation timeline, from when you hovered over the link the first time( if that makes any sense). What i need is a restart of the animation every time you hover the link. But thank a lot for the suggestion. – Jeppe Pendrup Jul 01 '17 at 08:06
Can you put it in a jsFiddle? Use Imgur for the 2 images. – frenchie Jul 01 '17 at 11:11
[jsFiddle](https://jsfiddle.net/2v7du7f0/2/) the images are on Github but should be accessible – Jeppe Pendrup Jul 01 '17 at 13:24
Ok, take a look at this question https://stackoverflow.com/questions/4717117/css-image-link-change-on-hover Let me know if you can make it work for you else I'll look at it tomorrow afternoon. – frenchie Jul 01 '17 at 15:00
[jsFiddle](https://jsfiddle.net/3ybhpdh1/#&togetherjs=lj50vQbzRS) this resets the gif. But i want the text to be the trigger and the animation should only pop up when you hover the text and the static image should not be visible. – Jeppe Pendrup Jul 02 '17 at 10:00
Then I tjink only JavaScript will do it, I'm on a cellphone but will update the answer if you need it, let me know – frenchie Jul 02 '17 at 10:06
That would be great. And if you have any suggestion on the Java, the help would be greatly appreciated! and thanks so much for your time and help so far. – Jeppe Pendrup Jul 02 '17 at 10:31
So this [jsFiddle](http://jsfiddle.net/tLa59vy3/) seems to do exactly what i want. But when i add it in the brackets editor it doesn't seem to work. Any suggestions? – Jeppe Pendrup Jul 02 '17 at 20:32
You rock!!!! This did the trick! My gratitude is endless! Getting some JSlint errors, but it works! – Jeppe Pendrup Jul 04 '17 at 16:36
ok, very cool, don't forget to post the link to the finished product so I can see it! (if possible) – frenchie Jul 04 '17 at 18:41
A bit too fast on saying that everything works as it should. I've managed to get it to reset, but as it is now, the animation pops up when i hover the image area and the "test" link, and it should only pop up when i hover the link. See--> https://jepen84.github.io/github.io/ – Jeppe Pendrup Jul 05 '17 at 07:58
First, there are 2 images with the same id ("DasBild"): just remove one. Second, the event handle in main.js line 7 is set on $('#test').on({... which is the container of both the image and the link so the code work as it's written. Just change it by adding an id to the element and wiring the event just to that id. – frenchie Jul 05 '17 at 09:14
Havn't had time to sit down with it yet. Will upload the solution as soon as i have it figured out:) hopefully today. But basically (#DasBild) should be set to an id? instead? – Jeppe Pendrup Jul 08 '17 at 08:43
Think i might be handling the id in the wrong manner. If it isn't too much hassle, would you write out an example of the code? – Jeppe Pendrup Jul 08 '17 at 11:05
Here: one image with one id, the id of the container is "test" and the id of the link is "zichtbaar" and that's what the event handler is wired to. https://jsfiddle.net/2v7du7f0/6/ – frenchie Jul 08 '17 at 13:24
1

That is perfect!! thanks. I had written , instead of just in the a id. That seemed to be messing it up. Thanks alot. – Jeppe Pendrup Jul 09 '17 at 06:36

score 1 · Answer 2 · answered Jun 30 '17 at 17:03

1

You need to use hover

#zichtbaar a span :hover {
    background-image: url("background.gif");

answered Jun 30 '17 at 17:03

Ravi

29,945
41
114
168

Jeppe Pendrup · Accepted Answer · 2017-07-09T06:33:58.740

Huge thanks to @frenchie for all the help. This ended up doing excactly what i wanted:

    <a id="zichtbaar" href="link">Zichtbaar</a>

function Start() {

$('#zichtbaar').on({

mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.png') }

  });
}

$(Start);

restart animated gif on hover css

3 Answers3