JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="Grid">

<li class="mix">
    <span class="img_wrapper">
        <img src="http://mixitup.io/im/bucky.jpg" data-src="http://lorempixel.com/284/190/sports/" alt="" onload="imgLoaded(this)"/>
    </span>
</li>

<li class="mix">
    <span class="img_wrapper">
        <img src="http://mixitup.io/im/bucky.jpg" data-src="http://lorempixel.com/284/190/nature/" alt="" onload="imgLoaded(this)"/>
    </span>
</li>

<li class="mix">
    <span class="img_wrapper">
        <img src="http://mixitup.io/im/bucky.jpg" data-src="http://lorempixel.com/284/190/abstract/" alt="" onload="imgLoaded(this)"/>
    </span>
</li>

</ul>

CSS

li {
    list-style: none;
}

.img_wrapper img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: auto;
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-ms-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}

JavaScript

/*
* MIXITUP - A CSS3 and JQuery Filter & Sort Plugin
* Version: 1.5
* License: Creative Commons Attribution-NoDerivs 3.0 Unported - CC BY-ND 3.0
* http://creativecommons.org/licenses/by-nd/3.0/
* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.
* Author: Patrick Kunka
* Copyright 2012-2013 Patrick Kunka, Barrel LLC, All Rights Reserved
* 
* http://mixitup.io
*/

(function(e){function k(c,a,g,d,b){function j(){l.unbind();a&&v(a,g,d,b);b.startOrder=[];b.newOrder=[];b.origSort=[];b.checkSort=[];u.removeStyle(b.prefix+"filter, filter, "+b.prefix+"transform, transform, opacity, display").css(b.clean).removeAttr("data-checksum");window.atob||u.css({display:"none",opacity:"0"});l.removeStyle(b.prefix+"transition, transition, "+b.prefix+"perspective, perspective, "+b.prefix+"perspective-origin, perspective-origin, "+(b.resizeContainer?"height":""));"list"==b.layoutMode?
(q.css({display:b.targetDisplayList,opacity:"1"}),b.origDisplay=b.targetDisplayList):(q.css({display:b.targetDisplayGrid,opacity:"1"}),b.origDisplay=b.targetDisplayGrid);b.origLayout=b.layoutMode;setTimeout(function(){u.removeStyle(b.prefix+"transition, transition");b.mixing=!1;if("function"==typeof b.onMixEnd){var a=b.onMixEnd.call(this,b);b=a?a:b}})}clearInterval(b.failsafe);b.mixing=!0;if("function"==typeof b.onMixStart){var f=b.onMixStart.call(this,b);b=f?f:b}for(var h=b.transitionSpeed,f=0;2>
f;f++){var m=0==f?m=b.prefix:"";b.transition[m+"transition"]="all "+h+"ms linear";b.transition[m+"transform"]=m+"translate3d(0,0,0)";b.perspective[m+"perspective"]=b.perspectiveDistance+"px";b.perspective[m+"perspective-origin"]=b.perspectiveOrigin}var r=b.targetSelector,u=d.find(r);u.each(function(){this.data={}});var l=u.parent();l.css(b.perspective);b.easingFallback="ease-in-out";"smooth"==b.easing&&(b.easing="cubic-bezier(0.25, 0.46, 0.45, 0.94)");"snap"==b.easing&&(b.easing="cubic-bezier(0.77, 0, 0.175,...