Play Animated GIF On Hover - jQuery Giffy.js

Giffy.js is a minimal GIF previewer and player that displays a custom cover image until you hover over the animated GIF instead of playing the GIF on page load.

See also:

• GIF Player In Pure JavaScript – LC GIF Player
• Facebook Style GIF Player & Previewer – gifsee.js

How to use it:

1. Embed a GIF image into the page and specify the path to the cover image in the data-cover attribute:

<img src="example.gif" width="500" data-cover="cover.png" class="giffy-img">

2. Load the JavaScript file giffy.js after the latest jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="giffy.js"></script>

3. Call the plugin on the GIF image.

$(function(){

  $('.giffy-img').giffy();

});

4. The example CSS for the GIF player.

giffy-container {
  position: relative;
  display: inline-block;
}

.giffy-container:hover.giffy-container:after {
  display: none;
}

.giffy-container:after {
  transition: all .1s ease;
  width: 60px;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  content: 'GIF';
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  border: 2px dashed rgba(0,0,0,.4);
  background: rgba(255,255,255,.8);
  color: #000;
  font-weight: bold;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
}

---

This awesome jQuery plugin is developed by danpalmieri. For more Advanced Usages, please check the demo page or visit the official website.