<img src="https://picsum.photos/id/1040/300/200" alt="a house on the top of a mountain">
<img src="https://picsum.photos/id/211/200/200" style="--r:30px" alt="a boat">
<img src="https://picsum.photos/id/193/150/200" style="--r: 10px" alt="a castle">

img {
  --r: 20px; /* control the radius of the circles */
  padding: var(--r);
  filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
  background: 
    radial-gradient(50% 50%,#0000 65%,#fff 67%) round 
     var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r));
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 30px;
  background: pink;
}