Dim entire screen except a fixed area?

Question

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:

If you're creating a feature tour / tutorial, you might be interested in one of the js libraries for doing this. They have some nifty features and will save you the trouble of writing a bunch of one-off css effects. Check out http://introjs.com/ or http://linkedin.github.io/hopscotch/. — octern, Jul 17 '17 at 18:44
This is just a suggestion for a lib: http://heelhook.github.io/chardin.js/ — online Thomas, Jul 18 '17 at 13:14

score 134 · Accepted Answer · edited Aug 18 '17 at 05:01

134

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>

edited Aug 18 '17 at 05:01

Vadim Ovchinnikov

13,327
5
62
90

answered Jul 17 '17 at 12:15

VilleKoo

2,827
2
14
23

29

Be sure to add `pointer-events: none` if you want the area below it to be clickable. – Nick Shvelidze Jul 17 '17 at 12:32
4

1,000px doesn't seem enough to me - seems like there would be too many cases where this doesn't fill the screen, otherwise really clever solution. – ESR Jul 18 '17 at 04:07
2

@EdmundReed you can adjust that for your needs :) – VilleKoo Jul 18 '17 at 05:01
@VilleKoo oh absolutely, just wasn't sure that it would be clear to everyone reading. – ESR Jul 18 '17 at 05:03
10

`box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);` will be guaranteed to cover the whole screen – Prinzhorn Jul 18 '17 at 12:15
@Prinzhorn i don't think vmax is supported by IE – VilleKoo Jul 18 '17 at 17:09
2

@VilleKoo you can add it behind the 1000px line and keep that as a fall back – Prinzhorn Jul 18 '17 at 17:22
1

@VilleKoo Then you'd better use `99999px` (or at least `9999px`) because `1000px` is not so big value. – Vadim Ovchinnikov Jul 19 '17 at 15:45
1

Good solution. An explanation of how *box-shadow* works would be useful. Here's a similar post with a description of each *box-shadow* value. https://stackoverflow.com/q/39374918/3597276 – Michael Benjamin Aug 13 '17 at 11:54

score 20 · Answer 2 · answered Jul 17 '17 at 12:12

20

You can create an SVG which is filled with a path that has the hole where you need it to. But I guess than you need to find a way to handle clicks, since all of them will be targeted to the overlaid svg. I thing document.getElementFromPoint can help you here. mdn

answered Jul 17 '17 at 12:12

philipp

15,947
15
61
106

i think google feedback form using svg to dim rest area. – Durga Jul 17 '17 at 12:21

score 3 · Answer 3 · answered Jul 20 '17 at 07:27

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>

Vadim Ovchinnikov · Answer 4 · 2017-08-18T05:00:32.687

You can achieve the same as in VilleKoo's answer using CSS outline property. It has excellent browser support (and works also in IE8+). Outlines have the same syntax as borders, but unlike border they don't take up space, they are drawn above the content.

Also for IE9+ you can replace 99999px with calc(100 * (1vh + 1vw - 1vmin)).

Disadvantage of this approach is that outline is not affected by border-radius.

Demo:

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* IE8 */
  outline: 99999px solid rgba(0,0,0,.3);
  /* IE9+ */
  outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
  /* for other browsers */
  outline: 100vmax solid rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

score 0 · Answer 5 · answered Jul 20 '17 at 12:03

Here is simple jQuery code using @VilleKoo css

var Dimmer = (function(){
  var el = $(".dimmer");
  
  return {
    showAt: function(x, y) {
      el
        .css({
          left: x,
          top: y,
        })
        .removeClass("hidden");
    },
    
    hide: function() {
      el.addClass("hidden");
    }
  }
}());


$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });

.dimmer {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
  pointer-events: none;
}

.hidden { display: none; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="submit" disabled>
  </div>
  
  <input type="button" value="Hide" class="btn-hide">
  <input type="button" value="Show" class="btn-show">
  <div class="dimmer hidden"></div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>

score 0 · Answer 6 · edited Jul 20 '17 at 20:54

0

#bg {
   background-color: gray;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99998;
}
#hole {
   position: fixed;
   top: 100px;
   left: 100px;
   width: 100px;
   height: 100px;
   z-index: 99999;
}

edited Jul 20 '17 at 20:54

xlm

6,854
14
53
55

answered Jul 20 '17 at 18:06

zerdnelemo

11
3

Dim entire screen except a fixed area?

6 Answers6

Linked

Related