JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative;">
<img src="http://dummyimage.com/120x90" alt="" />
<img src="http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/tn_berge1.jpg" alt="" style="position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0);" />
</div>
<p><a href="#" onclick="fade(); return false;">fade</a></p>

JavaScript

function fade(step) {
    var imgs = document.getElementsByTagName("img");
    step = step || 0;
    imgs[1].style.opacity = step/100;
    imgs[1].style.filter = "alpha(opacity=" + step + ")";
    step += 2;
    if (step <= 100) {
        setTimeout(function() {
            fade(step);
        }, 1);
    }
}