Koby Douek Koby Douek - 4 months ago 19
CSS Question

Dim entire screen except a fixed area?

I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a

<div>
which will dim all elements except a specific region which is in a fixed
width
,
height
,
top
and
left
.

The problem is, I cannot find a way to "cancel" the parent's background color (which is also transparent).

In the snipped below,
hole
is the div that is supposed to be without any
background-color
, including its parent's.

Can this be accomplished at all? Any ideas?



#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}

<div id="bg">
<div id="hole"></div>
</div>





Here's a mockup image of what I'm trying to achieve:

enter image description here

Answer Source

You could it with just one div and give it a box-shadow

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
}
<div></div>