I am currently exploring how to create a div with a mask that allows me to see through it to reveal a background image. Most tutorials I find discuss clip-paths, but what I am seeking is the opposite of this concept. Clip-paths typically display what is inside the clip, whereas I want to implement a mask that showcases the external area of the clip instead.
If you'd like to visualize the effect I aim to achieve, take a look at this example. Below, I provide a detailed explanation of this sample illustration.
The scenario involves a div featuring a background image. Nested within this div is another element that spans the entire width and height of its parent container (which includes the background image) and boasts a semi-transparent background color in rgba format. My objective is to apply a mask to this overlay div (the one with the rgba background color) so that a circular shape is removed from the center, revealing the complete background image without the color overlay interfering.
To dive deeper into this topic, check out this jsfiddle link that demonstrates the setup I described, albeit without the mask component as my knowledge on implementing it remains limited.
<div class="backgroundImage">
<div class="backgroundOverlayWithMask">
<!-- content will be here -->
</div>
</div>
.backgroundImage {
width: 100%;
height: 500px;
background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center;
background-size: cover
}
.backgroundOverlayWithMask {
width: 100%;
height: 500px;
background-color: rgba(0, 0, 0, 0.75);
}