<img src="https://picsum.photos/id/106/200/200" alt="some flowers">
<img src="https://picsum.photos/id/152/200/200" style="--b:8px;--g: 8px;--c: #B3CC57" alt="some flowers">

img {
  --b: 6px;  /* the border thickness*/
  --g: 12px; /* the gap */
  --c: #AB3E5B;
  
  padding: calc(var(--b) + var(--g));
  --_c: conic-gradient(at var(--b) calc(100% - var(--b)),#0000 25%,var(--c) 0);
  --_p: 200% var(--_i,var(--b)) no-repeat;
  background:
    conic-gradient(from 180deg at calc(100% - var(--b)) var(--b),#0000 25%,var(--c) 0)
     var(--_i,200%) 0/var(--_p), var(--_c);
  --_m:
    var(--_c) calc(var(--_i,0%) - 100%) 100%/var(--_p),
    conic-gradient(at var(--b) calc(100% - var(--b)),#000 25%,#0000 0);
  -webkit-mask: var(--_m);
          mask: var(--_m);
  outline: 100vmax solid var(--c);
  outline-offset: -100vmax;
  clip-path: inset(calc(2*(var(--b) + var(--g))));
  transition: 
    .3s clip-path, 
    .3s outline-color,
    .3s transform;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  --_t: 0s;
  clip-path: inset(0);
  outline-color: #0000;
  transform: scale(1.2);
  transition: 
    .25s 1s -webkit-mask-size, 
    .25s .75s -webkit-mask-position, 
    .25s .5s background-size,
    .25s .25s background-position,
    .25s clip-path, 
    .25s outline-color,
    .7s transform;
}


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