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

Question

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); /

}

An image file using the "gif" format can have 1 or more images in the file. Where the file has multiple images, a program that understands this (most browsers, for example) loops through the series of images. There isn't any good way to control this looping in the browser, so if you want both the "animated" view and a static view, you will need to have 2 image files (one static and one animated) and switch between them. — John Hascall, Dec 30 '15 at 23:18
You should be able to set a GIF as a background image with HTML or CSS without issue. There is not, however, a reliable cross-browser solution to play/stop them. Can we get some more context on what you're trying to do? — Lionel Ritchie the Manatee, Dec 30 '15 at 23:21
Making a website with an image gallery where some images represent gifs that I wish to play when they are hovered. Solution does not have to support IE — Pipeline, Dec 30 '15 at 23:22
A gif is a type of image that *can* be animated by having multiple images and some additional timing information in the file. But you can animate using CSS or JavaScript too. 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. — GolezTrol, Dec 30 '15 at 23:25
So from the .gif url it is not possible to extract the images? — Pipeline, Dec 30 '15 at 23:40

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

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.

edited May 23 '17 at 12:31

Community

1
1

answered Dec 30 '15 at 23:31

GolezTrol

114,394
18
182
210

So just by having the image of the start frame as well as the .gif url it is not possible to show a gif in a browser? – Pipeline Dec 30 '15 at 23:39
Not easily, but with [the right library](http://stackoverflow.com/questions/4645274/extracting-single-frames-from-animgif-to-canvas) you might get there – GolezTrol Dec 30 '15 at 23:42
It may be worth noting that [PNGs can be animated too](https://en.wikipedia.org/wiki/APNG), although currently only Safari and Firefox offer stable native support, and that [GIFs can have more than 256 colors](https://en.wikipedia.org/wiki/GIF#Palettes), as [an example from Wikipedia](https://upload.wikimedia.org/wikipedia/commons/8/8f/FullColourGIF.gif) proves. – Siguza Dec 31 '15 at 00:12
@Siguza True. In animated gifs, the frames just overwrite each other, leaving the previous frame visible when pixels are transparent. The 256 color limit is actually *per frame*, so using a trick, you could break up an image in multiple frames with no time in the animating and each frame having a custom palette containing exactly the needed colors for that part. It is possible, but you need specialized software, and you will have a huge image as a result. Animated PNGs would be nice, but support is poor even though the standard is already 8 years old. Nice to mention, though. – GolezTrol Dec 31 '15 at 00:20

score 0 · Answer 2 · answered Dec 31 '15 at 04:47

$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); /

}

This is just copying what I had in the OP – Pipeline Dec 31 '15 at 05:00 — Pipeline, Dec 31 '15 at 05:00

Pipeline · Answer 3 · 2015-12-31T06:25:27.837

0

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>

edited Dec 31 '15 at 06:25

answered Dec 31 '15 at 05:54

Pipeline

1,029
1
17
45

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

3 Answers3