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 (eg 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.