0
241
ViewsDim 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:
3 answers
Answer question0
You could do it with just one div and give it a box-shadow.
EDIT:
as @Nick Shvelidze pointed out, you should consider adding pointer-events: none
Added vmax value for box-shadow as @Prinzhorn suggested
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}<div></div>0
This can also be done similarly to @VilleKoo's answer, but with a border.
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}<div></div>