JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="imageCon">
    <div class="demo">This is the text over the image, This is the text over the image</div>
    <div class="slide" style="background-image: url('https://responsiveimages.org/demos/basic-implementation/[email protected]');"></div>
    <div class="slide" style="background-image: url('https://responsiveimages.org/demos/on-a-grid/img/[email protected]');"></div>
</div>

CSS

.imageCon { position: relative; z-index: 2; }
        .slide { z-index: -1; position: absolute; width: 100%; top: 0; left: 0; height: 100%; transition: opacity 1s ease-in-out; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; }
            .slide.showImg { opacity: 1; }
            
.demo { width:50%; margin:50px auto; color:#fff; font-size:32px; text-align:center; line-height:normal; padding:50px 0; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9); }

JavaScript

$(function() {
  $(".imageCon").each(function() {
    $(this).find(".slide:first").addClass("showImg");
  });
});
function cycleBackgrounds() {
    var index = 0;

    $imageEls = $('.imageCon .slide'); // Get the images to be cycled.

    setInterval(function () {
        // Get the next index.  If at end, restart to the beginning.
        index = index + 1 < $imageEls.length ? index + 1 : 0;

        // Show the next
        $imageEls.eq(index).addClass('showImg');

        // Hide the previous
        $imageEls.eq(index - 1).removeClass('showImg');
    }, 5000);
};

// Document Ready.
$(function () {
    cycleBackgrounds();
});