JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <img src="https://picsum.photos/1200" alt="">
  <div class="box1"></div>
</div>

CSS

div.box {
  width: 100px;
  height: 300px;
  margin: 50px;
  background: #eee;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto;
}
div.box:hover div.box1{
  left: -50%;
  top: -110%;
  height: 200%;
  opacity: 1;
}
div.box1 {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 100%;
  left: 100%;
  background: yellow;
  opacity: .3;
  transition: 1s ease-out;
  transform: rotate(45deg);
}