CSS - make circles filter through black opaque background and show image-CodePudding

I have 3 layers div, image, div containing circles. I need to add black opacity background to image and add circles top of it. Circles suppose to show non black opacity applied image. Please see the image below

I tried to do this using box shadows but shadows kept stacking. I also looked for clip-path but needed black opacity background and clip-path did not allow me to that. Could you point me to correct css property?

.main {
    width: 500px;
    height: 55px;
    position: absolute;
}

.circle-1{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

.circle-2{
  position: relative;
  left: 150px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

.circle-3{
  position: relative;
  left: 150px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

<div >
  <div />
  <div />
  <div />
</div>

CodePudding user response：

Add mix-blend-mode: overlay to the circles, and use filter: brightness(0.7) on the <img> to make the overlay.

.img-container {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.img-container .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: overlay;
}

<div >
  <img src="https://i.imgur.com/0hRbRO2.jpeg" alt="Egg Awarma" loading="lazy" />
  <!-- image source: https://imgur.com/gallery/0hRbRO2 -->
  <div ></div>
</div>

JS Fiddle demo.