How to make a translucent block with a hole in the center?

Question

css

Good afternoon. Tell me how you can implement the following task:
I'm trying to implement on the site - on an adaptive map - on the top layer a transparent block with a "hole in the middle".
Those. so that the map can be seen normally in the center, and in other places a translucent block overlaps it and text information is placed on this block. And that this whole thing was adaptive. The map is now responsive. How can you do that?
If it's not clear what I wrote, here's what I want to do

Answer 1

In fact, not everything is trivial. On the one hand, we need to preserve the interactivity of the map, on the other hand, make a responsive semi-transparent frame. The output needs to be 4 elements, one on each side of the mask, so that the center is active for the map, however, the task is made more difficult by the responsive with a transparent mask. With the left and right edges, everything is clear: the height is 100% and the width is 200px, the top and bottom edges should be 200px, but the width must be calculated by scripts, because if we set it to 100%, then the translucencies will overlap and it will turn out ugly. The width is calculated by the script according to the principle: width = width.window - 400px in our case
To keep the map interactive, it is not suitable to use a single element with a wide stroke, because mouse events will be active on it, not on the map. By setting this element to pointer-events: none, we will lose the ability to select text and copy contact information that will be located on this frame.

Answer 2

We use box-shadow to avoid overflow. Example

Answer 3

the block itself is colorless and with the property:
border: 40px solid rgba(0,0,0,0.5) - select the desired color

Answer 4

That's it .