Introduction to CSS Overlay
There are many times, we click on a page and another page pops up on the screen and vanishes on clicking. These pop-ups can be advertisements, forms, notifications or any other thing, depending on the requirement of the page. This screen-over-screen effect is called overlay. Its achieved using a combination of html, CSS and JavaScript. This can be useful in creation of dynamic pages where the user can control of they want to see the popup screen or not. The concept of overlay will be better understood as we look into how to achieve it step by step.
Syntax
The procedure to achieve an overlay is done in three steps. Firstly goes the CSS coding for the overlay. Here we can define the type of overlay that is needed and style it accordingly. Next, we call the styling the HTML page. Lastly, we use JavaScript function for the visibility of the overlay.
A sample CSS overlay styling can be as below:
#overlayCSS{
position: fixed;
display: none;
height: 50%;
width: 50%;
background-color: wheat;
opacity: 50%;
cursor: pointer;
}
Example to Implement CSS Overlay
Below are examples to implement:
1. Overlay Screen using JavaScript and External CSS
- Since we are using external CSS, we will start by creating the CSS file first.
- In the CSS file, we will just define the ID, which has the styling property for the overlay element.
- The final CSS file should look like this:
Code:
#overlayCSS{
position: fixed;
display: none;
height: 50%;
width: 50%;
background-color: wheat;
opacity: 50%;
cursor: pointer;
}
- Next, we will code the HTML page. Please note that all the magic happens in the HTML page, so we need to code it carefully.
- First, in the head section we will call for the external Style sheet like this:
Code:
<head>
<title>Overlay Demo</title>
<link rel = "stylesheet" href = "overlay.css">
</head>
- Next, in the body section, we will first define the JavaScript function, which will handle the appearance and vanishing of overlay screen. The script should look like this:
Code:
<script>
function up() {
document.getElementById("overlayCSS").style.display = "block";
}
function down() {
document.getElementById("overlayCSS").style.display = "none";
}
</script>
- Now we will finally call the ID created in the CSS file, using an <div> element. We will define its on-click property, such that, clicking on the overlay screen will make it disappear.
- Next, we will create a button, on click property of which, calls for the function which is responsible for the visibility of the overlay screen. The code for the above two points should look like this:
Code:
<div id="overlayCSS" onclick="down()"></div>
<h2>CLICK TO SEE OVERLAY</h2>
<button onclick="up()">Overlay effect UP</button>
- The final HTML file should look like this:
Code:
<html>
<head>
<title>Overlay Demo</title>
<link rel = "stylesheet" href = "overlay.css">
</head>
<body>
<script>
function up() {
document.getElementById("overlayCSS").style.display = "block";
}
function down() {
document.getElementById("overlayCSS").style.display = "none";
}
</script>
<div id="overlayCSS" onclick="down()"></div>
<h2>CLICK TO SEE OVERLAY</h2>
<button onclick="up()">Overlay effect UP</button>
</body>
</html>
4.5 (4,340 ratings)
View Course
- We will save this html page and open it through a browser. The initial page will look like this:
- Clicking on the button will give this overlay screen:
- Clicking anywhere on the overlay screen will make the overlay screen vanish.
2. Overlay through JavaScript using Internal CSS
- We are using internal CSS in this example. So all the functionalities will be in the HTML file.
- Firstly, in the head section of the page, we will define the style for the overlay screen by creating an ID. We will also create a class for styling the content that will be on the overlay screen. The style tag will be coded like this:
Code:
<style>
#overlayCSS{
position: fixed;
display: none;
height: 50%;
width:50%;
background-color: cyan;
opacity: 50%;
cursor: default;
}
.content{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: darkblue;
margin: 100px;
}
</style>
- Next, in the body section, we will create the JavaScript function for visibility and vanishing of the overlay screen. The script tag should be coded as follows:
Code:
<script>
function up(){
document.getElementById("overlayCSS").style.display="block";
}
function down(){
document.getElementById("overlayCSS").style.display="none";
}
</script>
- Finally, we will create the content, which uses the above defined style and script. We will call div elements and use the ID, class and functions to create the overlay effect. The coding should be as follows:
Code:
<div id="overlayCSS">
<div class="content">TEXT ON THE OVERLAY SCREEN
<br><button onclick="down()">Click to Close overlay</button>
</div>
</div>
<h2>CLICK TO SEE OVERLAY</h2>
<button onclick="up()">Overlay Up</button>
- The final HTML page should look like this:
Code:
<html>
<head>
<title>Overlay Using Internal CSS</title>
<style>
#overlayCSS{
position: fixed;
display: none;
height: 50%;
width:50%;
background-color: cyan;
opacity: 50%;
cursor: default;
}
.content{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: darkblue;
margin: 100px;
}
</style>
</head>
<body>
<script>
function up(){
document.getElementById("overlayCSS").style.display="block";
}
function down(){
document.getElementById("overlayCSS").style.display="none";
}
</script>
<div id="overlayCSS">
<div class="content">TEXT ON THE OVERLAY SCREEN
<br><button onclick="down()">Click to Close overlay</button>
</div>
</div>
<h2>CLICK TO SEE OVERLAY</h2>
<button onclick="up()">Overlay Up</button>
</body>
</html>
- Saving this html page and opening it through a browser will fetch the following page as an outcome:
- On clicking the button, an overlay screen will pop-up like this:
- Clicking on the second button will close the overlay screen and go back to the initial page.
Explanation: In the above example, we explored the basic usage of the overlay screen. This feature or property of HTML and CSS is very crucial. This can be used while creating pop-ups on clicking any element. This pop up can be an advertisement, a form to be filled by the user, any notification, or even a warning. Developers can use this basic code and tweak it accordingly to generate the overlay of their choice. There can be images and other content on the popup or overlay screen too. Make sure you have explored all the offered options.
Recommended Articles
This is a guide to CSS Overlay. Here we discuss an introduction to CSS Overlay with appropriate syntax and respective examples for better understanding. You can also go through our other related articles to learn more –
