<img src="https://picsum.photos/id/64/300/300" alt="A random woman">
<img src="https://picsum.photos/id/375/300/300" alt="A random man" style="--c:#83AF9B">

img {
  --c: #F9CDAD; /* the main color */
  --b: 8px; /* thickness of the border */
  --o: 25px; /* control the offset */
  
  width: 200px; /* the image size */
  --_p: calc(2*var(--o) + var(--b));
  padding: var(--_p) var(--_p) 0 0;
  outline: var(--b) solid var(--c);
  outline-offset: calc(var(--o) - var(--_p));
  transition: .4s;
  cursor: pointer;
}
/* change the padding to get all the combination
   two consecutive padding equal to --_p and the others 0
*/
img + img {
  padding: var(--_p) 0 0 var(--_p);
}
img:hover {
  padding: calc(var(--_p)/2);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  background: #547980;
}