JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

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";



    $('.maindiv img').mouseover(function () {
        var image = this;
        loop = setInterval(function () {
            if (i < images.length - 1) {
                i++;
                right=$('.middlediv img').attr('src');
                middle=$('.leftdiv img').attr('src');
                $('.rightdiv img').attr('src', right);
                $('.middlediv img').attr('src',  middle) ;                     
                $('.leftdiv img').attr('src', images[i]);
                
            } else {
                i = 0;
                $(image).attr('src', images[i]);
            }

        }, 2500);

    }).mouseout(function () {
        clearInterval(loop);
        i = 0;
        $(this).attr('src', images[i]);

    });

});