JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="leave">
    <img src="http://dummyimage.com/200x200/ff800a/ffffff&text=はっぱ" alt="" />
</div>
<div id="hami">
    <img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20130419/b8ac6f40970512db446b24.jpg" alt="">
</div>

CSS

* {
    margin: 0; padding: 0;
}
#leave {
    position: absolute;top: 40px; left: 0;
    z-index: 2;
    width: 200px; height: 200px;
}
#leave img {
    -webkit-transform-origin: left top;
        transform-origin: left top;
    -webkit-transition: -webkit-transform .5s;
     transition: transform .5s;
}
#leave.active img {
    transform: rotate(90deg);
}
#hami {
    width: 200px;
}
#hami img {
    width: 100%;
    height: auto;
}

JavaScript

/*setInterval(function(){

    $('#leave').toggleClass('active');
}, 600);*/
var _src = $('#hami img').attr('src');
$('#leave').hover(function(){
    $(this).addClass('active');
    
    setTimeout(function(){
        
        $('#hami img').attr('src','http://i.ytimg.com/vi/NQoaR8fOcEU/0.jpg');
    }, 450);
},
function (){
$(this).removeClass('active');
    $('#hami img').attr('src',_src);
});