JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul id="blocks"> 
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 1</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 2</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 3</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 4</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 5</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 6</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 7</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 8</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 9</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 10</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 11</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
      <h1>Caption 12</h1> 
    </div> 
  </li>  
  <li> <span> hover span</span> 
  
    <div class="overlay"></div> 
<div class="wrap"> 
      <h1>Caption 13</h1> 
    </div> 
  </li> 
  <li> <span> hover span</span> 
  <div class="overlay"></div> 
    <div class="wrap"> 
     ...

CSS

#blocks {
    list-style-type:none;
    padding:0px;
    margin:0px;
    display:block;
    width:1000px;
}
#blocks li {
    display:block;
    float:left;
    margin:5px; /*background-color:#F00; */
    color:#FFF;
    position:relative;
    padding:5px;
    zoom:1;
    
    
}
#blocks li div.wrap {
    display:block;
    width:150px;
    height:150px;
    position:relative;
    overflow:hidden;
    background:#F00 url(http://humayunrehman.com/hovertest/thumb.jpg);
    cursor:pointer;
}
#blocks li img {
    display:block;
    width:150px;
    height:150px;
}
#blocks li img.overlay{ position:absolute; width:100px; height:100px; z-index:10; top:0px; bottom:0px;}
#blocks li h1 {
    display:inline-block;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;    
    font-size:14px;
    /*width:100px;*/
    text-align:center;
    background:#00F;
    zoom:1;
    padding:0px;
    margin:0px;
}
#blocks li span {
    display:block;
    width:350px;
    height:150px;
    position:absolute;
    background:#000;
    z-index:99999;
    display:none;
}

JavaScript

var v = $("#blocks > li").css('visibility', 'hidden'), cur = 0;
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
function fadeInNextLI() {
  v.eq(cur++).css('visibility','visible').hide().fadeIn();
  if(cur != v.length) setTimeout(fadeInNextLI, 50);
}
fadeInNextLI();