Show/Play A Fullscreen Gif On Hover – GifLinks

GifLinks is a zero-dependency JavaScript library that displays and plays a fullscreen GIF image when hovering over elements.

How to use it:

1. Load the minified version of the GifLinks library in the document.

<script src="GifLinks.min.js"></script>

2. Specify the path to the GIF image.

<a href="#" data-src="./1.gif" class="demo"> Hove Me! </a>
<span data-src="./1.gif" class="demo"> Hove Me! </span>
...

3. Initialize the GifLinks library on document ready.

window.onload = function() {
  var elements = document.querySelectorAll( '.demo' );
  GifLinks( elements );
}

4. Apply CSS classes to the GIF image based on its state.

.giflink.preloaded {
  /* ... */
}
.giflink.has-link {
  /* ... */
}
.giflink.no-link {
  /* ... */
}