How to have an anim gif on a link and play it on hover and reset

Question

First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).

I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.

I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.

So far this is what I tried:

CSS:

.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}

.img-acu:hover
{
background-image: url("acusel.gif");
}

HTML:

<a href="../example.html" class="img-acu" title="ACU Project link"></a>

But nothing at all appears :( The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.

The I tried this:

CSS:

#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}

#test:hover
{
background-image: url("acusel.gif");
}

HTML:

<div id="test"></div>

And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).

Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?

I would really appreciate any help!

Thanks a lot!!

Solution 1

That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)

A basic script could be somthing like that:

<img id="myImg" src="staticImg.png" />

<script>
    $(function() {
        $("#myImg").hover(
            function() {
                $(this).attr("src", "animatedImg.gif");
            },
            function() {
                $(this).attr("src", "staticImg.jpg");
            }                         
        );                  
    });
</script>

Solution 2

The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:

<div class="img-acu"> 

inside of:

<a href="../example.html" title="ACU Project link"> (insert here) </a>

All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover

Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):

.img-acu
{
  float: left;
  width: 250px;
  height: 132px;
  background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
  background-size: 125%;
}

.img-acu:hover
{
  background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}

<!-- Don't do this: 
<a href="../example.html" class="img-acu" title="ACU Project link"></a>
-->

<div>
  <div>Click on image below to go to link:</div>
  <a href="https://www.google.com" title="ACU Project link">
    <div class="img-acu"></div>
  </a>
</div>

Solution 3

Hopefully this simple way can help someone:

<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">

Then add the following CSS:

.static {
  position: absolute;
  background: white;
 }

.static:hover {
  opacity: 0;
 }

This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen