Overlay image with transparent space in css - html

Question

It's possible do like the image below in CSS
overlay an 360 Panorama, with a empty transparent space, responsive and keeping the proportions
I tried creating 4 divs and using this css
<div><div></div><div></div><div></div><div></div></div>
#frame div:nth-child(1) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#frame div:nth-child(2) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#frame div:nth-child(3) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
top: 0;
}
#frame div:nth-child(4) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
bottom: 0;
}

Answer 1

My idea is to place the image twice. 1 time as the transparent border and the second time centered and overflowing - and hide the overflowing part
Here's an example
HTML
<div class="trans-cont">
<img class="trans-img" src="https://www.w3schools.com/w3css/img_lights.jpg" />
<div class="center">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
</div>
CSS
.trans-cont{
display: inline-block;
position: relative;
background-color: #454545;
width: 40%;
}
.trans-img{
opacity: 0.3;
width: 100%;
}
.center{
width: 80%;
height: 80%;
top: 10%;
left: 10%;
position: absolute;
overflow: hidden;
}
.center img{
width: 125%;
position: absolute;
top: -12.5%;
left: -12.5%;
}
Option 2:
Use the image once and hide it with divs as a border
Example 2

Answer 2

Please try below:
HTML:
<div class="container">
<img src="imgSrc" alt="imgName" style="width:100%;">
<div class="content">
</div>
</div>
CSS:
.container {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content{
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 40%;
box-shadow: 0 0 0 9rem rgba(0, 0, 0, 0.5);
}