JSFiddle - React, Tailwind, and code Playground
HTML
<div id="maindiv" class="maindiv">
<div id="leftdiv" class="leftdiv">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTf233WQoen89q8C4Yrqd-nOLG8BpdMeyEYdT1aH0uetP_mBjgGMw" id="img1" />
</div>
<div id="middlediv" class="middlediv">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdyLHsWLdmzHvtMniyyiFWDXwmeapOOSw0oHrsmGbWZV4-IrUq" id="img2" />
</div>
<div id="rightdiv" class="rightdiv">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTfrZiZaoBbtJ6FWx3IZe1kzRHgcfLllmCeHoLp9MFJYtHITUv4" id="img3" />
</div>
CSS
div {
float:left;
}
div img {
height:250px;
width:180px;
}
.leftdiv {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari and Chrome */
}
.rightdiv {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
}
JavaScript
jQuery(document).ready(function () {
var images = [];
var loop;
var i = 0;
images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87";
images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw";
images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ";
$('img', '.maindiv').mouseover(function () {
//Get divs inside main div and reverse them, so right is first
var divs = $($('div','.maindiv').get().reverse());
//Set up loop
loop = setInterval(function(){
divs.each(function(key, div){
if (divs[key+1])
{
//All divs gets image src from previous div > img
$('img', div).attr('src', $('img', $(divs[key+1])).attr('src'));
}
else
{
//This is left div
if (images && images[i])
{
//If picture url not in array then add it
if ($.inArray($('img', div).attr('src'), images) == -1)
{
images.push($('img', div).attr('src'));
}
$('img', div).attr('src', images[i]);
i++;
if (i>= images.length) i = 0;
}
}
});
}, 1500);
}).mouseout(function(){
clearInterval(loop);
});
});