Hole in overlay with CSS

by

Yes, this effect is possible.

I would use the css box-shadow with a very large spread radius.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);


.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}
<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

<div class="hole"></div>

More Related Contents:

  1. Prevent body scrolling but allow overlay scrolling
  2. Working with CSS in React [closed]
  3. Canvas is stretched when using CSS but normal with “width” / “height” properties
  4. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  5. Override body style for content in an iframe
  6. Hiding the scroll bar on an HTML page
  7. CSS3 background image transition
  8. Understanding z-index stacking order
  9. Why does the order of media queries matter in CSS?
  10. Truncating long strings with CSS: feasible yet?
  11. CSS to set A4 paper size
  12. Remove padding from columns in Bootstrap 3
  13. How can I align one item right with flexbox?
  14. CSS “and” and “or”
  15. Using the last-child selector
  16. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  17. Style disabled button with CSS
  18. Z-Index Relative or Absolute?
  19. What’s the difference between `all: unset` and `all: revert’
  20. rotate3d shorthand
  21. How to link a CSS file from HTML file?
  22. Build list of selectors with LESS
  23. how to rotate text left 90 degree and cell size is adjusted according to text in html
  24. Set div height equal to screen size
  25. Styling the new twitter widget (embedded timeline)
  26. What CSS3 features still need vendor prefixes?
  27. How to fix unexpected column order in bootstrap 4?
  28. How do I change md-input-container placeholder color using css in angular material?
  29. internet explorer font face ssl
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment