JSFiddle - React, Tailwind, and code Playground

by rniestroj

HTML

<div id="container">
  <img src="http://placehold.it/200x200/32a3e5" width="200" height="200" id="record"/>
  <img src="http://placehold.it/200x200/15a555" width="200" height="200" id="sleeve" />
</div>

CSS

#container {
    background-color: aqua;
    width: 500px;
    height: 400px;
    position: relative;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}

JavaScript

$("#sleeve").hover(
    function(){
       $("#record").animate({left: '+=100',bottom: '+=100'}, 1750); 
    }, 
    function(){
       $("#record").animate({left: '-=100',bottom: '-=100'}, 1750);  
    });