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:

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!🙏🙏