How to create a mask over an image (not a clip-path, but vice versa)

Question

I am trying to apply a mask to a div so that I can see it in the background image. Everything I see is about clips, but I'm looking for the opposite. Clip tracks show what is inside the clip. I'm trying to make it a mask so you can see the outside of the clip.

Here is an example of what I'm trying to achieve , and below is a complete description of the example.

I have a div with a background image. Inside this div there is another div that covers the entire width and height of its parent (with a background image) and has a translucent (rgba) background color. I am trying to add a mask to this overlay div (one that has an rgba background color) so that the circle is cut out from the middle, which shows the full background image without color overlay.

Here is a link to jsfiddle that sets up what I'm talking about, but without a mask (since I don't know how to do this).

<div class="backgroundImage">
  <div class="backgroundOverlayWithMask">
    <!-- content will be here -->
  </div>
</div>

.backgroundImage {
  width: 100%;
  height: 500px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center;
  background-size: cover
}

.backgroundOverlayWithMask {
  width: 100%;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.75);
}

Answer 1

I think I have a solution, using box shadow, :afterand flex. Fiddle . Based on web ticks, answer here .

#inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
#inner:after {
  content: '';
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  align-self: center;
}
#container {
  background: url('http://via.placeholder.com/800x200');
  background-size: cover;
}

<div id="container">
  <div id="inner">
  </div>
</div>

Run codeHide result