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

img {
  --s: 200px; /* the image size */
  --b: 10px;
  --c: #8A9B0F;
  
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;
  padding-top: calc(var(--s) - 2*var(--b));
  border: var(--b) solid #0000;
  box-shadow: 0 0 0 999px var(--c); 
  background: var(--c);
  clip-path: inset(0);
  object-fit: cover;
  object-position: bottom;
  cursor: pointer;
  transition: 1s;
}

img:hover {
  padding: 0;
  clip-path: inset(-100% 0 0);
}


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