<img src="https://picsum.photos/id/696/300/300" alt="Flowers">

@property --h {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --s: 220px; /* the image size */
  --b: 10px;  /* the image border */
  --d: 30px; /* the depth */
  --c: #8A9B0F;
  --_c: color-mix(in srgb,var(--c),#fff 25%);
  
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;

  --h: calc(var(--s) - var(--b) - var(--d));
  padding-top: min(var(--h),var(--s) - 2*var(--b) - var(--d));
  border: solid #0000;
  border-width: var(--b) var(--b) calc(var(--b) + var(--d)) calc(var(--b) + var(--d));
  background: 
    linear-gradient(var(--_c) 0 0) no-repeat
     100% 0/calc(100% - var(--d)) calc(100% - var(--d)),
    conic-gradient(at left var(--d) bottom var(--d),
     #0000 25%,#0008 0 62.5%,#0004 0) var(--c);
  background-origin: border-box;
  clip-path: polygon(
    var(--d) 0,
    100% 0,
   100% calc(100% - var(--d)),
    calc(100% - var(--d)) 100%,
    0 100%,
    0 var(--d),
    var(--d) 0);
  box-shadow: 0 0 0 999px var(--_c);
  object-fit: cover;
  object-position: bottom;
  cursor: pointer;
  transition: 1s linear;
  transition-property: --h,background-size,clip-path;
}
img:hover {
  --h: calc(-1*var(--b));
  background-size: calc(100% - var(--d)) 0%,auto;
  clip-path: polygon(
    var(--d) calc(-1*(var(--s) - var(--d))),
    100% calc(-1*(var(--s) - var(--d))),    
    100% calc(100% - var(--d)),
    calc(100% - var(--d)) 100%,
    0 100%,
    0 var(--d),
    var(--d) 0);;
}



body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #F1D4AF;
}