How to Create a Transparent Hole in a CSS Overlay?

Creating a Hole in CSS Overlays

Creating a hole in an overlay to reveal the underlying website elements is possible with CSS alone. One effective technique is to utilize the box-shadow property with a large spread radius.

To achieve this effect:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

This box-shadow creates a large transparent square with a small blue border. It effectively creates a hole in the overlay, allowing you to see through to the underlying content. The spread radius of 9999px ensures that the hole covers the entire overlay area.

Example HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

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

This CSS code and HTML example demonstrate how to create a transparent hole in an overlay using only CSS, enabling you to see the website elements beneath.

The above is the detailed content of How to Create a Transparent Hole in a CSS Overlay?. For more information, please follow other related articles on the PHP Chinese website!