CSS - Darken image except for rectangle overlay

Question

I have an <img> for which I want to highlight a certain area as shown below:

I'm trying to figure out a way to create the following effect using just CSS and no JS. I was originally thinking of using an inset border-box, but I need to be able to use percentages for both the location (e.g. top left of the highlighted area is 50% in from left and 80% down from right) and size of box and it appears that border-box can only take px values. I could use JS to keep resizing everything if the image size changes, but I don't want to do that.

Any ideas?

Answer 1

You can create one div element with img inside. And then use pseudo-element on div that will have large box-shadow, and you can position pseudo-element using position-absolute

div {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
div:after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6);
}

<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>

Answer 2

Maybe try creating 4 boxes positioned all sides of the image overlapping as much as you need. Set the boxes color to black with a transparency, and adjust the sizes of them how you like. These boxes would sit ontop of the original image.