https://css-tip.com/corner-only-border-image/

Creates a square outline that changes sizes on hover

img {
  --s: 50px; /* the size on the corner */
  --t: 5px; /* the thickness of the border */
  --g: 20px; /* the gap between the border and image */
 
  padding: calc(var(--g) + var(--t));
  outline: var(--t) solid #b38184; /* the color here */
  outline-offset: calc(-1 * var(--t));
  mask:
    conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s))
      calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
  transition: 0.4s;
}
 
img:hover {
  outline-offset: calc(var(--g) / -1);
}
  • todo add screenshot or personal captured example of this effect for ease of referencing.