CSS

div {
  width: 200px;
  height: 200px;
  background: url(<http://lorempixel.com/200/200/abstract/6>);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

In the above example, a transparent circle is created at the center using radial-gradient and this is then used as a mask to produce the effect of a circle being cut out from the center of an image.

Image without mask:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4756023c-9924-45e8-958a-1fed366606a3/Untitled.png

Image with mask:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/257a6f78-961c-48ae-9dac-1c5ab871a970/Untitled.png