<img src="https://picsum.photos/id/575/200/200" alt="sky, mountains and sea">

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;
  
  padding: calc(var(--b) + var(--g));
  background:
    linear-gradient(var(--c) var(--b),#0000 0 calc(100% - var(--b)), var(--c) 0) 
    50%/20% 100% no-repeat,
    linear-gradient(90deg,var(--c) var(--b),#0000 0 calc(100% - var(--b)), var(--c) 0) 
    50% -100%/100% 200% no-repeat;
  transition: 
    .3s .3s background-size,
    .3s background-position,
    .4s transform;
  cursor: pointer;
}
img:hover {
  background-size: 100% 100%,100% 200%;
  background-position: 50%,50% 0%;
  transition: 
    .3s     background-size,
    .3s .3s background-position,
    .4s transform;
  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;
}