Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to create an overlay effect with CSS?
The overlay effect can be easily created on a web page. Let?s say we have placed the divs together on a web page. To let any of them appear when required is called an overlay effect. The overflow is also closeable with a cross sign on the top-right. Let us see how to create an overlay effect with HTML and CSS.
Set the container for overlay
A div is set for the overlay with a cross sign to close the overflow and a button for the same purpose −
<div class="overlay" > <span class="hideBtn">×</span> </div>
Script to hide and display
The following is the script to hide and display −
<script>
document.querySelector('.hideBtn').addEventListener('click',hideSearch);
document.querySelector('.showBtn').addEventListener('click',showSearch);
function showSearch() {
document.querySelector('.overlay').style.display = "block";
}
function hideSearch() {
document.querySelector('.overlay').style.display = "none";
}
</script>
The overlay styles
The height property is used to set the overlay height. The overlay is invisible when the web page loads, therefore, the display property is set to none. For the overlay i.e., the front and the elements in the back, the z-index property is set −
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.747);
}
The close button
The button to close the overlay −
<span class="hideBtn">×</span>>
Style it like this. The position is set absolute. To place it on the top-right, use the top and right properties −
.overlay .hideBtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: rgb(255, 0, 0);
opacity: 0.8;
}
Example
To create an overlay effect with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.showBtn {
background: #008b0c;
border: none;
color:white;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
opacity: 0.8;
}
.showBtn:hover {
opacity: 1;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.747);
}
.overlay .hideBtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: rgb(255, 0, 0);
opacity: 0.8;
}
.overlay .hideBtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="overlay" >
<span class="hideBtn">×</span>>
</div>
<h1>Overlay Effect Example</h1>
<button class="showBtn">Turn Overlay On</button>
<h2>Click on the above button to try overlay effect</h2>
<script>
document.querySelector('.hideBtn').addEventListener('click',hideSearch);
document.querySelector('.showBtn').addEventListener('click',showSearch);
function showSearch() {
document.querySelector('.overlay').style.display = "block";
}
function hideSearch() {
document.querySelector('.overlay').style.display = "none";
}
</script>
</body>
</html>
421 Views
