JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>  
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

     <div id="peel" class="layer">
        <a href="#" id="image" class="bigsize layer"></a>
        <span id="shadow"></span>
        <span id="reverse" class="bigsize">
            <img src="http://lab.htm.co.il/peel/large.jpg">
        </span>
    </div>
   
 
    <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
 


  
</body>
</html>

CSS

body{
background-color:aliceblue;
}

.layer{
position: absolute;
z-index: 9999;
right: 0px;
top: 0px;
}

.bigsize{
width: 500px;
height: 500px;
}

#peel{
width: 120px;
height: 120px;
overflow: hidden;
-webkit-transition: all 500ms;
}
#peel:hover{
width: 500px;
height: 500px;
}
#image{
background-image: url('http://lab.htm.co.il/peel/large.jpg');
-webkit-mask-image: url('http://lab.htm.co.il/peel/mask2.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 420px 0;
-webkit-transition: all 500ms;
}
#peel:hover #image{
-webkit-mask-position: 148px 0px;
}

#reverse{
position: absolute;
z-index: 2;
right: -416px;
top: -417px;
-webkit-transform: scaleX(-1) rotate(90deg);
-webkit-mask-image: url('http://lab.htm.co.il/peel/mask.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 124px 0;
-webkit-transition: all 500ms;
}

#peel:hover #reverse{
-webkit-mask-position: 110px 0;
right: -141px;
top: -136px;
}

#reverse::before{
content: "";
position: absolute;
z-index: 9999;
top: 0;
left: 0;
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.90) 50%,rgba(255, 255, 255, 0.70) 100%);
width: 500px;
height: 500px;
}


#shadow{
position: absolute;
width: 510px;
height: 80px;
z-index: 2;
right: -116px;
top: -114px;
background: -webkit-linear-gradient(90deg, transparent 0%,rgba(0, 0, 0, 0.5) 60%);
-webkit-transform: rotate(45deg);
-webkit-transition: all 500ms;
}
#peel:hover #shadow{
width:1290px;
right:-216px;
}


@-webkit-keyframes spin{
  0%   { -webkit-transform: scaleX(-1) rotate(90deg);}
  50% { -webkit-transform: scaleX(-1) rotate(91deg);}
  100% { -webkit-transform: scaleX(-1) rotate(90deg);}
}

#reverse{
  -webkit-animation-name: spin;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}