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

51,731
109
304
510

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

30,829
42
119
173

score 1 · Answer 3 · answered Aug 02 '22 at 09:43

1

    <img src="URL_OF_FIRST_IMAGE_SOURCE" 
    onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" 
    onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />

I also had the same issues and this solution solved my problem perfectly it also help me tidy my CSS stylesheet cause it also replaces the use of stating a hover effect

Check it out here on fiddle: a link!

answered Aug 02 '22 at 09:43

Bright Lazarus

11
1
1

The question asker was using `CSS` to display their image; with `background-image`. So this wouldn't work in that case. – treckstar Aug 04 '22 at 00:44
I understand his question sir Am just giving him another alternative to achieve his task I also had same issues and this method help me gain more control over the task – Bright Lazarus Aug 05 '22 at 07:11

restart animated gif on hover css

3 Answers3