abagshaw abagshaw -4 years ago 135
CSS Question

CSS - Darken image except for rectangle overlay

I have an

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

enter image description here

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download