<img src="https://picsum.photos/id/106/300/300" alt="some flowers">
<img src="https://picsum.photos/id/82/300/300" alt="some flowers" class="alt" style="--c: #8A9B0F">

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

img {
  --w: 200px; /* image size */
  --b: 12px;  /* control the overlay size (it will be w + b)*/
  --g: 15px;  /* the gap between the overlay and the image on hover */
  --c: #F56991;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: right;
  padding-inline: clamp(0px,var(--h),var(--w)) 0;
  box-sizing: border-box;
  background: var(--c);
  box-shadow: calc(var(--h) - var(--w) - var(--b) + var(--e)) 0 0 var(--b) var(--c);
  --h: calc(var(--w) + var(--b));
  --e: 0px;
  cursor: pointer;
  transition: --h .3s .3s linear,--e .3s linear;
}
.alt {
  object-position: left;
  padding-inline: 0 clamp(0px,var(--h),var(--w));
  box-shadow: calc(var(--w) + var(--b) - var(--h) - var(--e)) 0 0 var(--b) var(--c);
}

img:hover {
  --h: calc(-1*var(--g));
  --e: calc(var(--w) + var(--b) + var(--g));
  transition: --h .4s linear,--e .3s .4s;
}

/* a light version for Firefox  */
@supports (-moz-appearance:none) {
  img {
    --b: 0px!important;
    --g: 0px!important;
    --e: 0px!important;
    transition: .6s linear!important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 80px;
  background: #F1D4AF;
}