Play Animated GIF On Hover - jQuery Giffy.js

File Size: 171 KB
Views Total: 2052
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="" 
<script src="giffy.js"></script>

3. Call the plugin on the GIF image.




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.