<img src="https://picsum.photos/id/354/200/200" alt="A bridge">
img {
  --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));
  transition: .4s;
  cursor: pointer;
  background: #fff;
}
img:hover {
  outline-offset: calc(var(--g)/-1);
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  gap: 80px;
  background: #655643;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.