There are many techniques for creating overlays. In this snippet, we’ll show how to create an overlay using CSS properties.
One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property. We give higher z-index to the next <div>, which is opened on the top of our overlay.
<h2>Creating an Overlay with an Absolutely Positioned Element</h2>
<div class="overlay"></div>
<div class="modal">Lorem Ipsum is simply dummy text </div>
<div>Lorem Ipsum is simply dummy text…</div>
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
body {
position: relative;
padding: 20px;
margin: 0;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
So, we’ve created an overlay. Let’s see the outcome!
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
body {
position: relative;
padding: 20px;
margin: 0;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
}
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<h2>Creating an Overlay with an Absolutely Positioned Element</h2>
<div class="overlay"></div>
<div class="modal">Lorem Ipsum is simply dummy text </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
We can also create an overlay using the ::before and ::after selectors.
We can have the same styles and considerations used in the previous example by styling the ::before and ::after pseudo-classes on the body.
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
body {
position: relative;
padding: 20px;
margin: 0;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
body:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.3);
}
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<h2>Creating an Overlay with an Absolutely Positioned Element</h2>
<div class="modal">Lorem Ipsum is simply dummy text </div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>