CSS - dark image except for rectangle overlay

I have <img>

one for which I want to select a specific area as shown below:

enter image description here

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?

+3


source to share


2 answers


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>
      

Run code


+5


source


Perhaps try creating 4 boxes on all sides of the image, overlapping as much as you like. Set the colors of the boxes to black with transparency and adjust their sizes as you like. These margins will sit on the table of the original image.



+1


source







All Articles