JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">Class of 2013:
    <div class="overlay">
        <!-- Put images to display here...-->
        <img src="getImages();" alt="image to be displayed" />
    </div>
</div>

JavaScript

var ITLP = [];
       ITLP[0] = "http://lorempixel.com/400/200/nature";
       ITLP[1] = "http://lorempixel.com/400/200/city";

       function getImages() {
           var i = Math.floor(Math.random() * (ITLP.length + 1)); // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FMath%2Frandom
           console.log(ITLP[0]);
           return ITLP[0];
       }

       function showimg() {
           $(".box").hover(

           function () {
               console.log("Hover start");
               $(".box > .overlay > img").attr("src", getImages());
               $(this).find(".overlay").fadeIn();
           },

           function () {
               console.log("Hover end");
               $(this).find(".overlay").fadeOut();
           });
       }


       showimg();