JSFiddle - React, Tailwind, and code Playground

HTML

<img id="thephoto1" src="http://www.i-love-cats.com/software/Adorable-Cats-Screensaver.jpg" />
<img id="thephoto2" src="http://www.catfacts.org/cat-mouth-full.jpg" />
<img id="thephoto3" src="http://static.howstuffworks.com/gif/home-remedies-for-cats-2.jpg" />

CSS

#thephoto {visibility:hidden;}

JavaScript

var images = [ "thephoto1", "thephoto2", "thephoto3" ];

function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}
function fadeIn(objId, opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImages()}