CODEWITHSUNDEEP
javascripthtmlcssimagegif
Pipeline
Pipeline

Reputation: 1059

HTML/CSS/JS Show gif on hover, what exactly is a gif?

I have many div elements that I pull and each of them have a background-image. Some elements however represent a gif and when I mouse hover over them I wish to play the gif and have it stop or reset when the mouse exit.

I see many examples of gif animation with an image tag but I cannot seem to get it to work with a background-image.

So for each Image I have the starting image for the gif as well as the .gif extension to the full content.

I am reading this question here for reference: Start GIF On Mouse Hover and Pause Otherwise?

which brings me to my question: what is a gif?

Is it a collection of smaller images for the "animation"? I see alot of "image slicing" terminology or having multiple images that cycle through to simulate the animation. But is it possible to show a gif through html/css/js with just the starting image and the .gif url?

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });
.item gif{

  background-image: url(theJPGurl); /

}

Upvotes: 0

Views: 2351

Answers (3)

Pipeline
Pipeline

Reputation: 1059

If anyone could comment, I did find this example which solves this:

http://codepen.io/anon/pen/qbqvgy

div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('https://media.giphy.com/media/V1T2JBmK03OFy/giphy.gifs');
}
<div>
</div>

Upvotes: 0

Joseph Little
Joseph Little

Reputation: 1

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });
.item gif{

  background-image: url(theJPGurl); /

}

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });
.item gif{

  background-image: url(theJPGurl); /

}

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

A gif is a type of bitmap image. It used to be very popular, because it can have transparent pixels (in contrast to jpg). But in that regard it is replaced by png, which is generally smaller, supports alpha transparency (where gif pixels are either fully transparent or fully opaque), and most importantly, gif images are limited to 256 colors.

One other feat of gif images is their animation. You may know them from old websites that show a rotating envelope or something.

An animated gif image is just a collection of images combined in a single file. Such a file also contains additional timing information in the file. However, a gif image is not a smart object that can be controlled. You can't start, stop, pause or speed up a gif image using JavaScript. It just contains frames and can be looped or not, but all that information is in the file.

So, while you can animate using JavaScript or CSS by showing different images, this is a different technique than just showing an animated gif. So, maybe it's best to investigate other techniques. While gifs are basically very simple, they are also very limited in their use. For instance, you can't reliably time a script to run the end of a gif animation.

-edit-

Apparently you can (in FireFox) pause a gif file.

Upvotes: 1

Related Questions