JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.com/jquery-timing/jquery-timing.js"></script>
<div id="images">
    <img title="Bolognese" src="http://farm1.staticflickr.com/19/90495389_d440522366_s.jpg"/>
    <img title="Carbonara" src="http://farm2.staticflickr.com/2139/1654258670_b841a80147_s.jpg"/>
    <img title="Cake" src="http://farm1.staticflickr.com/3543/3436037485_42ff9bd5dc_s.jpg"/>
</div>

CSS

#images {
 overflow:hidden;
 position: relative;
}
#images img{
 position: relative;
 cursor: pointer;
 border: none;
 width: 150px;
 height: 150px;
}

JavaScript

function noHover() {
    return this.is(':hover') ? this.wait('mouseleave') : this
}

$('#images > img').hide().repeat().each($).fadeIn($).wait(1000).wait(noHover).fadeOut($);