<img src="https://picsum.photos/id/1011/500/300" >

img {
  --x:10px;
  --y:20px;
  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)) 100%,       
     calc(var(--x) + var(--y))        100% ,      
     var(--y)        calc(100% - var(--y))       
     );
  margin:30px;
  transform:perspective(1000px) rotateX(40deg);
  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 all;
  max-width:100%;
  display:block;
  margin:auto;
}

img:hover {
  transform:perspective(1000px) rotateX(0deg);
  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)) calc(100% - var(--y)),       
     calc(var(--x) + var(--y))        calc(100% - var(--y)),      
     var(--y)        calc(100% - var(--y))       
     );
}

h1 {
  text-align:center;
}