img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;
  
  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b),#0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg,var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  --_m:
    conic-gradient(at 50% var(--b),#0000 25%,#000 0) calc(50% + var(--_i,50%))/200%,
    conic-gradient(at 50% var(--b),#000 75%,#0000 0) calc(50% - var(--_i,50%))/200%; 
  -webkit-mask: var(--_m);
          mask: var(--_m);
  transition: 
    .3s calc(.6s - var(--_t,.6s)) -webkit-mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}


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