2

I have a squared image and want to cut it middle with a circle shape to see what's behind (actually a body background-image). I found clip-path CSS property, but I only arrive to create a circle with the image instead of creating a circle surrounded by my image.

Until now I had a white background, so I just created a ::after element white, with an inset box-shadow but now I got an image for the background so I can't keep that.

Is there a way with or without clip-path to achieve that?

PS: the final goal is to create a music vinyl rotating, so this middle hole is necessary! :)

Thanks.

Navalex
  • 264
  • 2
  • 9

1 Answers1

5

You can do this using mask and not clip-path

img {
  border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
          mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
}

body {
  background:linear-gradient(to right,gray,yellow);
}
<img src="https://i.picsum.photos/id/1003/400/400.jpg">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • why `farthest-side`? I tried with `circle at 50% 50%` and I got the same result. – doğukan Mar 20 '20 at 20:15
  • 2
    @dgknca farthest-side allow me to have better control over the color percentage. 100% with color will be the edge of the element while with `circle at 50% 50%` (which is the same as `circle`) I need to use around 66% which is not trivial: https://jsfiddle.net/7d6mck8o/ – Temani Afif Mar 20 '20 at 20:50
  • 2
    @dgknca relevant part from the specification: https://drafts.csswg.org/css-images-3/#valdef-radial-gradient-ending-shape and a related asnwer with many radial-gradient examples: https://stackoverflow.com/a/57218554/8620333 – Temani Afif Mar 20 '20 at 20:56
  • thanks for this pretty informative and in depth answer. – doğukan Mar 20 '20 at 21:04