JSFiddle - React, Tailwind, and code Playground
HTML
<div id="flicker">
<img src="http://223.130.27.185/~bossmodels/wp-content/uploads/rosa-model-brisbane-1-225x320.jpg" />
<img src="http://223.130.27.185/~bossmodels/wp-content/uploads/rosa-model-brisbane-2-225x320.jpg" />
<img src="http://223.130.27.185/~bossmodels/wp-content/uploads/rosa-model-brisbane-3-225x320.jpg" />
<img src="http://223.130.27.185/~bossmodels/wp-content/uploads/rosa-model-brisbane-5-225x320.jpg" />
</div>
CSS
* {margin:0; padding:0; outline:none;}
#flicker {position:relative; width:200px; height:200px; background:url(http://img813.imageshack.us/img813/952/52968767.png) 0 0 no-repeat;}
#flicker img {display:none; position:absolute; top:0; left:0; z-index:1;}
#flicker img.active {display:block;}
JavaScript
$('#flicker').hover(function() {
flicker = setInterval(function() {
if ($('#flicker img.active').length > 0) {
$('#flicker img.active').removeClass('active').next('img').addClass('active');
} else {
$('#flicker img:first-child').addClass('active');
}
}, 200);
}, function() {
clearInterval(flicker);
$('#flicker img').removeClass('active');
});