Full screen Overlay using CSS only
Sometimes you need your entire browser window with a black tint in the background and make a popup at the center of the screen. Normally this technique is used for displaying a login window without moving from existing page or displaying a video, when a user clicks on a link or button in a web page.
Full screen Overlay Effects
When you search for a solution for fullscreen overlay, most website provide solutions using JavaScript or jQuery. The following solution is using only CSS and not using any JavaScript of jQuery. Here we are going to create a pop-up window that overlays an existing html page and disabling all links and bringing into focus on the pop up window.
Full Page Overlay Window
Click the following button then you will get a full screen overlay with a pop-up window.
The popup screen is a Login screen (its an image) and at the right above of the window there is a closing button also. The login window is not a separate window of the web browser that is opened but rather a div that overlays the existing web page. The overlaying div is a transparent covers to your page data and lets the user knows that they can get back to the parent page by closing the popup window that is on top right.
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(login.png) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
<a href="#loginScreen" class="button">Click here to Log In</a>
</div>
<div id="loginScreen">
<a href="#" class="cancel">×</a>
</div>
<div id="cover" >
</div>
</body>
</html>More about CSS Overlay….CSS Overlay Techniques