JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imageanimation">
  <table id="picturetable">
    <tr>
        <td class="photos"><img width="35px" height="35px" src="http://images.free-extras.com/pics/f/football-954.jpg"/></td>
      <td class="photos"><img width="35px" height="35px" src="http://images.free-extras.com/pics/r/rawlings_football-955.jpg"/></td>
      <td class="photos"><img width="35px" height="35px" src="http://images.free-extras.com/pics/c/cartoon_football-956.jpg"/></td>
      <td class="photos"><img width="35px" height="35px" src="http://images.free-extras.com/pics/f/football-960.jpg"/></td>
    </tr>
  </table>
</div>

CSS

#picturetable {
 float:left;
 height:212px;
 margin:0 auto;
 position:relative;
 left:15px;
 z-index:-1;
 }

.photos img {
  position: absolute;
  top :0;
  left :0;
}

.photos {
  width: 35px;
  height: 35px;
  overflow: hidden;
  padding:5px;
  padding-top:10px;
  padding-bottom:10px;
}

JavaScript

$(document).ready(function(){
  rotatePics(1);
});

function rotatePics(currentPhoto) {
  var numberOfPhotos = $('.photos img').length;
  currentPhoto = currentPhoto % numberOfPhotos;

  $('.photos img').eq(currentPhoto).fadeOut(function() {
  // re-order the z-index
    $('.photos img').each(function(i) {
      $(this).css(
        'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
      );
    });
    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 1000);
  });
}