JSFiddle - React, Tailwind, and code Playground

by heera

HTML

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

CSS

img { width:100px;height:100px }

JavaScript

var ImgArray = new Array();
ImgArray[0] = "http://oi52.tinypic.com/1zyztxw.jpg";
ImgArray[1] = "http://fc00.deviantart.net/fs40/i/2009/054/9/6/Yet_Another_Globe_V2_by_MazeNL77.jpg";
ImgArray[2] = "http://img1.etsystatic.com/006/1/7897554/il_fullxfull.468828091_h2es.jpg";
ImgArray[3] = "http://img0.etsystatic.com/004/0/7897554/il_fullxfull.468811734_rh1e.jpg";
ImgArray[4] = "http://img1.etsystatic.com/005/1/6214290/il_fullxfull.391672397_lxbv.jpg";
ImgArray[5] = "http://img1.etsystatic.com/014/0/6499866/il_fullxfull.447194491_ltx3.jpg";

$(document).ready(show);
function show(){
    $('img').attr('src', ImgArray[0]).parent().hide();
    var max = ImgArray.length;
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); },
        function(){ 
            var img = $(this).find(".overlay").find('img');
            var i = Math.floor(Math.random()*max);
            $(this).find(".overlay").fadeOut(function(){
                img.attr('src', ImgArray[i]);
            }); 
        }
    );        
}