Obfuscate part of the background-image, and make other parts clear

Question

I’m trying to reproduce this "example" of Dribble, however I’m not getting it. My current progress is this (using SCSS), however as can be verified I duplicated the background to achieve this effect, for the images to be aligned exactly one on top of the other I had to use the background-position: center; what is not the desired (I would like to use the property cover). How can I do this "effect" using only an image of background?

Compiling SCSS for CSS looks like this:

* {
  margin: 0;
  padding: 0px;
}

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  background-color: darkslategray;
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main {
  background-color: #fff;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  border-radius: 10px;
  width: 80%;
  height: 80%;
}

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

Answer 1

Option 1

You can use mix-blend-mode:overlay in the element above the image. Here it is important that this element is in the white color for the overlay be good, you can control his intensity with the opacity

OBS: Notice I kept the background-blend-mode:color-burn in father’s bg, and also used the size of him as cover hassle-free.

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: linear-gradient(rgba(0,50,50,0.5) 0%, rgba(0,50,50,0.5) 100%), url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 0 0px 50px rgba(0,0,0,0.5) inset; */
}

#main {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    border-radius: 10px;
    width: 80%;
    height: 80%;
    mix-blend-mode: overlay;
    opacity: 0.9;
}

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

---

Option 2:

If the rounded corners are no problem you get this result using a inset box-shadow

See the result in the example below:

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0px 50px rgba(0,50,50,0.5) inset;
}

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