CSS - Darken image except for rectangle overlay

Question

I'm attempting to come up with a solution to get the following effect with only CSS and no JS. I was planning on using an inset border box, but I need to be able to utilize percentages for both the position (e.g., the top left of the highlighted region is 50 percent in from the left and 80 percent down from the right) and the size of the box, yet border-box only accepts px values. If the image size changes, I could use JS to maintain scaling everything, but I don't want to. Any solution?

Answer 1

Perhaps try constructing four boxes, one on each side of the image, overlapping as much as needed. Set the boxes' colours to black with a transparency and alter their sizes as desired. These boxes would be superimposed on top of the original image.