CSS - dark image except for rectangle overlay
I have <img>
one for which I want to select a specific area as shown below:
I am trying to figure out a way to create the following effect using only CSS and JS. I originally thought about using a box-like inset, but I need to be able to use percentages for both locations (for example, the top left of the selection is 50% on the left and 80% down on the right) and the size of the window and it seems like it border-box
can only take pk values ... I could use JS to resize everything if the image resizes, but I don't want to.
Any ideas?
source to share
You can create one element div
with img
inside. And then use pseudo-element
on div
, which will have a large box-shadow
one and you can position the pseudo element usingposition-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>
source to share