JSFiddle - React, Tailwind, and code Playground

HTML

<li class="item">
    <a href="/link.html" class="gallery-item">
        <span>
            <img src="http://placehold.it/100x100" data-hover="http://placehold.it/100x101" width="243" height="243" />
        </span>
    </a>   
</li>

JavaScript

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src);
    }).mouseenter(function () {
        $(this).fadeOut(500, function(){
        	$(this).attr('src', $(this).data('hover'));
        	$(this).fadeIn(500);
        });
    }).mouseleave(function () {
        $(this).fadeOut(500, function(){
        	$(this).attr('src', $(this).data('original'));
        	$(this).fadeIn(500);
        });
    });
});