Create an overlay without creating a new element

Do you want an overlay over your image, video, background or whatever? Then you can do that by just adding some CSS and you won't need to add another HTML element for that!

How? Let's see-

We can make it with the power of ::before/::after selectors.

In the example below, we will make an overlay only by adding styles to ::before selector.

div {
  background-image: url("https://images.pexels.com/photos/585759/pexels-photo-585759.jpeg");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  width: 100vw;
}


div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

How's it working?

It's working based on the positioning of CSS.

• When we're not declaring a position for the only <div> of the example, by default, it's taking relative position.

• So, now we are selecting the ::before selector and placing it over the <div> by declaring absolute position.

• This is starting from the top corner and the very left of the div because we set left:0 and top:0.

• Also, we are setting its width and height to 100% which will enable it to take the whole space over the mentioned div.

Check this from another perspective!

That's all folks, for now!

Follow me on other platforms-
Twitter Handle
LinkedIn Handle

If you like the article, you can Buy me a coffee ☕