Add opacity on an image - html

Question

I'm going straight to the point here.
I want to create a simple window within an image.
outside the window will have a opacity like on the sample picture.
I'm not really good when it comes to css so please bear with me.
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment: scroll;
z-index: -1;
}
.window{
position:absolute;
width:50%;
height:50%;
background-size: cover;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}
<section class="section2" style="height:100vh;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="the-container">
<div class="img-canvas"></div>
<div class="window"></div>
</div>
</div>
</div>
</section>
something like this:
and here's a fiddle for you to manipulate the code:
https://jsfiddle.net/Lk21vL01/
thanks in advance.

Answer 1

You were very close, you just needed to apply similar styling to your .window element and use background-attachment:fixed
see this updated jsfiddle
.section2{
}
.section2 .row{
margin: 0;
}
.the-container{
position: relative;
width: 100%;
height: 450px;
}
.the-container .text-center{
background: #fff;
opacity: .9;
}
.window,
.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment:fixed;
z-index: -1;
opacity: 0.5;
}
.window{
position:absolute;
width:50%;
height:50%;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}

Answer 2

Not the most proper way to achieve this, but you could use a box-shadow "hack" to create the effect you're looking for. Just set a box shadow around the window with 0 blur and a spread that will always bigger than the background (something like 1000, or even 5000 pixels).
#background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, slategray, #333);
overflow: hidden;
}
#window {
position: absolute;
width: 250px;
height: 100px;
top: 25%;
left: 25%;
box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.75);
}
<div id="background">
<div id="window">
</div>
</div>