JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <img src = "http://laboutiquedelpowerpoint.net/PPS/imagenes/naturaleza/pai_escocia.jpg" />
    <img src = "https://www.muralesyvinilos.com/murales/p/arbol_y_paisaje_muralesyvinilos_2908671__XXL.jpg" />
</section>
<section>
    <img src = "http://i01.i.aliimg.com/wsphoto/v0/691007825/Thomas-scenery-oil-painting-pure-hand-oil-painting-picture-decorative-painting-mural-font-b-modern-b.jpg" />
    <img src = "http://2.bp.blogspot.com/-AvWEFG99bNI/UWMNVNCBp-I/AAAAAAAAABM/zQ6MbPqW4vU/s400/monte+aloia+galicia.JPG" />
</section>
<img id = "cover" src = "https://lh4.googleusercontent.com/-RRCQ7YgAAp4/Uku2SVWbDYI/AAAAAAAAEdI/2kJchNNEE6Y/s800/red-leaves.jpg" />

CSS

#cover{
    position: absolute;
    top: 0;
    z-index: 1;
    background: navy;
    opacity: 0;
    -webkit-animation: opaco 5s;
    -moz-animation: opaco 5s;
}

@keyframes opaco{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

@-webkit-keyframes opaco{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

@-moz-keyframes opaco{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}