JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="outer" class="start">
           <img id="img1" class="bgndimg start" src="http://i.imgur.com/3KZlvif.jpg?1"></img>
           <img id="img2" class="bgndimg start" src="http://i.imgur.com/LCjgi.jpg"></img>
            <p>This is a div</p>
            <p>The images are behind the content</p>
            
        </div>
    </body>

CSS

#img1.start { opacity: 1; }
#img1.stop { opacity: 0; }
#img2.start { opacity: 0; }
#img2.stop { opacity: 1; }

.bgndimg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

JavaScript

$(function() {
    $('#outer').hover(function() {
        $('#img1,#img2').toggleClass('stop',[15000]).toggleClass('start',[15000]);
    });
})