How to create a CSS perfect overlay.

There are some cases in developer's life when he has to put a crisp, perfect overlay over some elements. Be it buttons, forms or any other div.

How to do that without writing 100 lines of code and not having any pixels expanding?

Here's an example of what I am talking about:

Compare YouTube and IMDB buttons. IMDB is using overlay which nicely signalizes to the user that the button is indeed locked. It is darkened with small lock icon at the bottom right.

Here's a simple recipe on how to do that:

1. Add position: relative to the parent.
2. Add overflow: hidden to the parent.
3. Inside the parent create overlay element like div.
4. To the new div add following styles.

div {
  position: absolute;
  inset: 0;
}

And that's it!

I will provide a real example below but before I do that I will break down how it all works.

• Setting position on parent contains the absolute child element so it is not visible outside it.

• Setting overflow hidden ensures that everything is contained within. (helpful when using border-radius)

• Setting inset on child is basically top:0, bottom:0, left:0, right:0. So it stretches itself to fit the parent.

• All that's left is to is just to add background color and opacity to your liking.

Here's example of how it looks like:

As you can see the overlay is very clean and adjusts itself to the box and is not exceeding the rounded corners, cool!

You can play around with it here.

Let's take a look at the HTML:

      <div class="box locked">
        Overlay
        <div class="overlay"></div>
      </div>

We have a box & overlay. For the sake of displaying differences it is turned on only by adding .locked class to the parent. (We want only to display overlay if div is locked in this case.)

The CSS

.box {
  position: relative;
  display: grid;
  place-content: center;
  width: 128px;
  height: 128px;
  border: 2px solid green;
  border-radius: 25%;
  overflow: hidden;
}

.overlay {
  display: none;
  background: grey;
  opacity: 0.5;
  position: absolute;
  inset: 0;
}

.locked .overlay {
  display: block; // show overlay
}

Stylesheet follows the rules described earlier and successfully enables you to add a fitting overlay to any element you'd need.

Thanks for reading!🙏🙏

EDIT:

Red Ochsenbein from the comment section suggested to use ::after instead of another div inside. Which will improve the code reusability and readability.

Here's how it would look like:

      <div class="box locked">
        Overlay
      </div>

.box {
  position: relative;
  display: grid;
  place-content: center;
  width: 128px;
  height: 128px;
  border: 2px solid green;
  border-radius: 25%;
  overflow: hidden;
}

.locked::after {
  background: grey;
  opacity: 0.5;
  position: absolute;
  inset: 0;
}