JSFiddle - React, Tailwind, and code Playground

by fest1val

HTML

<div class="block_show">
  <div class="element gif">
    <img class="gif_anim" src="https://cursorinfo.co.il/wp-content/uploads/2018/06/test.png" data-img="http://giphygifs.s3.amazonaws.com/media/gw3IWyGkC0rsazTi/200.gif">
  </div>
</div>

CSS

.gif img {
  width: 100px;
  height: 100px;
}

JavaScript

$(".gif").hover(function() {
	var gif = $(this).find('img');
  var image_src = gif.attr('src');
  var gif_src = gif.attr('data-img');
  gif.attr('src', gif_src);
  gif.attr('data-img', image_src);
}, function() {
var gif = $(this).find('img');
  var gif_src = gif.attr('src');
  var image_src = gif.attr('data-img');
  gif.attr('src', image_src);
  gif.attr('data-img', gif_src);
});