.simg {
  --x: 10px;
  --y: 20px;
  transform: perspective(1000px) rotateX(var(--_a,40deg));
  clip-path: polygon( var(--y) var(--y), calc(100% - var(--y)) var(--y), calc(100% - var(--y)) calc(100% - var(--y)), calc(100% - var(--y) - var(--x)) var(--_c,100%), calc(var(--x) + var(--y)) var(--_c,100%), var(--y) calc(100% - var(--y)) );
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding: var(--y) var(--y) 0 var(--y);
  transition: 1s;
}

.box:hover .simg {
  --_a: 0deg;
  --_c: calc(100% - var(--y));
}

.box {
  cursor: pointer;
}

.box:hover .hslide {
  transform: translateY(0%);
  transition: .8s .2s;
}