JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="img"></div>
<div class="img one"></div>

CSS

div.img {
  width: 300px;
  height: 500px;
  position: absolute;
  margin: 50px;
  background-position: center;
  background: url(https://picsum.photos/1200);
  transform: scale(1.05);
}
div.one {
  transform: scale(1.0);
  background: url(https://picsum.photos/1200);
  animation: a 1s infinite;
  z-index: 2;
}
@keyframes a {
  from {
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}