<img src="https://picsum.photos/id/1066/300/300" alt="a baby">
<img src="https://picsum.photos/id/453/300/300" alt="a rock star">
img {
  width: 230px;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  outline: 100vmax solid #fff220;
  outline-offset: -100vmax;
  transition: .3s;
  cursor: pointer;
}
img:hover {
  outline-color: #0000;
  clip-path: polygon(98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%,50% 0%, 61% 35%);
  transform: scale(1.3);
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 50px;
  background: #e181c2;
  filter: drop-shadow(0 0 4px #fff220)
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.