gif play on hover and restart after hover, not play in bg

[hooskanoonun]

How do I make a gif on my website play from the start every time I hover over it as opposed to playing from the last point I was hovering on it.

#about {

    margin-left:0%;

    margin-right:0%;

    height: 100%;

    width:33.33%;

    float:left;

    background-image: url(img/static-showcase.png);

    background-size:cover;

    background-position: center;

    background-repeat: no-repeat;

}

#about:hover {

    background-image: url(img/showcase.gif);

}

[Nancy OShea]

I assume you are using an animated GIF in a loop?

A browser refresh will reload the page and start animation sequence from beginning -- F5 or Ctrl+R.

Nancy O.

[Jon Fritz · Accepted solution]

You need to use javascript and an animated gif that is set to only play once, but it's pretty simple, in your html...

<img src="off-state.jpg" onmouseenter="this.src ="animated.gif';" onmouseout="this.src = 'off-state.jpg';" alt="something pithy">

1. Set the image source to your "off state" image that you want showing when the page loads

2. Set the onmouseenter source to the single play animated gif you want to show when hovered

3. Set the onmouseout source to the original "off state" image

That's the simplest way I know of to do it.

[hooskanoonun]

slight problem, i am using divs and am styling them with a background image 😕 not using images

[Guest]

hooskanoonun wrote:

slight problem, i am using divs and am styling them with a background image 😕 not using images

I seen that you're using bg image in your OP and figured the img src and/or refreshing the page wouldn't work for you. I wondered why you marked the previous reply as solved before you bothered to try the code and see if it worked for you?

Your browser is most likely caching the image and upon subsequent hover it's playing the gif animation from where it stopped animating the last time you hovered over it. To fix this you should append a random string to the background image upon every mouseover so the browser thinks it's a *new* background image. There's lots of discussions about this online if you bothered to search for something related to your question like "gif background image replay animation". Here's a discussion from a few years ago I found by searching for you that covers the topic. jquery - Restart animated GIF as background-image - Stack Overflow

That should give you enough information to figure out how to use the logic for your specific coding needs.

best,

Shocker

[hooskanoonun]

i did look it up but i was trying to find a way of using css as opposed to javascript. I used html 5 video instead to fix the problem.

[Guest]

i did look it up but i was trying to find a way of using css as opposed to javascript.

Well... you didn't mention that earlier. You also marked Jon's reply as the correct answer despite it using javascript and not using a background image so there's that too.

best,

Shocker

[hooskanoonun]

sorry, this is my first time on a forum site 😕 Thankyou for your help.

[Jon Fritz]

You can't do it with css alone, it won't work. Javascript has to be involved.

[Guest]

Although I haven't tried it, you might be able to set headers to prevent the image from caching which would "reload" the background image whenever you hovered over it. Javascript would not be involved if you prevented image and/or page caching.

Look here caching - disable cache for some images - Stack Overflow

Browser caching strategies can be controlled by HTTP headers. Remember that they are just a hint, really. Since browsers are terribly inconsistent in this (and any other) field, you'll need several headers to get the desired effect on a range of browsers.

header("Pragma-directive: no-cache");
  header("Cache-directive: no-cache");
  header("Cache-control: no-cache");
  header("Pragma: no-cache");
  header("Expires: 0");

I know this topic is old, but it ranks very well in Google. I found out that putting this in your header works well;

<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

Also using .htaccess No cache only one .gif file

best,

Shocker

[Jon Fritz]

Seems like a long way to go to get a background image to keep from sitting in the cache, especially if you do want others to cache like normal. I figured out a relatively simple javascript method based on my previous post.

In the css, you set the "off state" for the element...

#chaz {

     background-image:url(off-state.jpg);

}

Then, in the html, you set the onmouseover and onmouseout like before (make sure the animated.gif path ends with a ?)...

<div id="chaz" onmouseover="this.style.backgroundImage = 'url(animated.gif?' + Math.random() + ')';" onmouseout="this.style.backgroundImage = 'url(off-state.jpg)';">

</div>

What I'm doing here is appending the location of the image with ? and a random number so the browser always pulls a fresh copy when you hover.

[hooskanoonun]

worked great thanks!

[Jon Fritz]

Hmm, I would have thought it possible to get working using...

onmouseover="this.style.backgroundImage = 'url(anmiated.gif)';"

But it acts like a pure css background image swap and shows the last frame of the animation when you leave and come back.

FWIW, the "onmouseenter" used in my previous post should be "onmouseover" (I still have some old .js methods rattling around in my brain)

While typing this, Shocker's post came up, that looks promising for what you want to do.