<img src="https://picsum.photos/id/575/200/200" alt="sky, mountains and sea">
<img src="https://picsum.photos/id/791/200/200" style="--b:3px;--g: 8px;--c: #FFAB07" alt="a lot of hot air balloon">

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


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