Very Simple Fullscreen Overlay In HTML CSS

Last Updated: January 26, 2024

Welcome to a tutorial on how to create a fullscreen overlay in CSS and CSS. Want to build a popup, fullscreen menu, or just “block” the current page? There’s no need to load an entire 3rd party framework, it’s dreadfully easy to build an overlay – Read on!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

FULLSCREEN OVERLAY DEMO

Click anywhere to close.

 

 

FULLSCREEN OVERLAY

All right, let us now get into the details of how the fullscreen overlay works.

 

TUTORIAL VIDEO

 

PART 1) THE HTML

overlay.html
<!-- (A) FULL SCREEN OVERLAY -->
<div id="fullover"
     onclick="document.getElementById('fullover').classList.toggle('show')">
  Click anywhere to close.
</div>
 
<!-- (B) DEMO -->
<button id="demo"
        onclick="document.getElementById('fullover').classList.toggle('show')">
  Open overlay
</button>

Yep, that’s all for the HTML.

  • All we need for the overlay is a single <div id="fullover">. Omit the text if you want an “empty overlay”.
  • The <button> is optional. It is used to toggle the fullscreen overlay.
  • Take note of how the overlay is being toggled, we add/remove a show CSS class on it.

 

 

PART 2) THE CSS

/* (A) FULLSCREEN OVERLAY */
#fullover {
  /* (A1) COVER ENTIRE WINDOW */
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
 
  /* (A2) BACKGROUND */
  background: rgb(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
 
  /* (A3) CENTER CONTENT */
  display: flex;
  justify-content: center;
  align-items: center;
 
  /* (A4) HIDE OVERLAY BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}
 
/* (B) SHOW OVERLAY */
#fullover.show {
  opacity: 1; visibility: visible;
}

Looks like a handful, but keep calm and look carefully.

  • (A1) Set <div id="fullover"> to cover the entire window using a fixed position and 100% viewport width/height.
  • (A2) Set a transparent background color, and add a background blur effect.
  • (A3) This is optional. If you want to center the overlay contents on the page, just use the flex layout to help you.
  • (A4) Hide the overlay by default.
  • (B) Display the overlay if the show CSS class is present.

 

 

EXTRAS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEATSHEET

Simple Fullscreen Overlay In HTML  CSS (Click To Enlarge)

 

COMPATIBILITY CHECKS

This simple fullscreen overlay should work on all modern browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

3 thoughts on “Very Simple Fullscreen Overlay In HTML CSS”

    1. W.S. Toh

      The spam/security filter stripped the comment… but I think I know what you are referring to. That is from the previous version, I have updated the tutorial to prevent confusion. Thanks for reporting.

Comments are closed.