DEV Community

Cover image for How to create a CSS perfect overlay.
Igor Stencel
Igor Stencel

Posted on

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:

compozly.com profile page

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;
}


Enter fullscreen mode Exit fullscreen mode

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:

Overlay example

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>


Enter fullscreen mode Exit fullscreen mode

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
}


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode


.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;
}


Enter fullscreen mode Exit fullscreen mode

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him)

Use ::after and get rid of the additional div.

Collapse
 
chumra profile image
Igor Stencel • Edited

That's actually a great idea.

I will mention it in the article, thanks!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay