title: Overlay with cut out rectangle mask
body: <p>Scenario: <strong>I want to cover an element by a rectangular mask</strong> (background #000 with opacity 0.8, for example). Next, there's an area in the covered area for which I want to highlight.</p>
  
  <p>Here is a sample screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/DXMbx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DXMbx.png" alt="Overlay with rectangular cut out mask"></a></p>
  
  <p>(As you notice, there' s a rectangle cut from the darken mask. In Photoshop, it's easy - just place a layer on top and cut the rectangle out).</p>
  
  <p>How could I make it work in CSS? </p>
  
  <p>Side note: This kind of trick seems to be used a lot for "educating users about new features".</p>