How do I launch gifs on click or hover?

Please help me do this on my wordpress site (https://giffs.ru), so that the gifs are launched on click or hover. I myself am new to scripts, I do not understand yet, and all the plugins GIF Animation Preview and WP GIF Player do not work, I have been fighting for a week. Ideally, I would like something like http://fishki.net/auto/2413484-podborka-avtomobilynyh-gifok.html as here!

Author: Alexandr_TT, 2017-11-06
Source

2 answers

Well, for example, like this

jQuery(document).ready(function($) {
  $("img").hover(function() {
    var src = this.src;
    this.src = $(this).data("img");
    $(this).data("img", src);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://yt3.ggpht.com/-DBNBnMLsnrs/AAAAAAAAAAI/AAAAAAAAAAA/onFqjfb9JQs/s100-c-k-no-mo-rj-c0xffffff/photo.jpg" data-img="http://liubavyshka.ru/_ph/177/2/403146738.gif"/>
<img src="https://yt3.ggpht.com/-A58yPmvdnIc/AAAAAAAAAAI/AAAAAAAAAAA/2o1tCSQHEG0/s100-c-k-no-mo-rj-c0xffffff/photo.jpg" data-img="http://lizasimpson.com/uploads/_pages/613/simpsons-avatars-2.gif"/>
<img src="https://yt3.ggpht.com/-sEESfUOW2IM/AAAAAAAAAAI/AAAAAAAAAAA/7E_dHNhe9wI/s100-c-k-no-mo-rj-c0xffffff/photo.jpg" data-img="https://vignette.wikia.nocookie.net/uncyclopedia/images/1/17/Simpsons-1.gif/revision/latest?cb=20081006234733"/>

On the hit/run of the mouse, we swap the values of the attributes src and data-img

 3
Author: Anton Shchyrov, 2017-11-06 16:35:32

First, show the non-animated image and replace it with a GIF when you hover over it.

 0
Author: Микола Мірчук, 2017-11-06 21:13:05