- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an overlay effect with CSS?
To create an overlay effect with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <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; } .overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlay input[type=text]:hover { background: #f1f1f1; } .overlay button { float: left; width: 20%; padding: 15px; background: rgb(54, 21, 241); font-size: 17px; border: none; color:white; cursor: pointer; opacity: 0.8; } .overlay button:hover { opacity: 1; } </style> </head> <body> <div class="overlay" > <span class="hideBtn">×</span> <div class="searchBar"> <form > <button type="submit">Close Overlay</button> </form> </div> </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>
Output
The above code will produce the following output −
On clicking the “Turn Overlay On” button −
- Related Articles
- How to create image overlay hover effect with CSS?
- How to create an image overlay zoom effect on hover with CSS?
- How to create image overlay icon effect on hover with CSS?
- How to create an image overlay title on hover with CSS?
- How to create image overlay hover slide effects with CSS?
- How to create fading effect with CSS
- How to create a transition effect with CSS?
- How to create a full screen overlay navigation menu with CSS and JavaScript?
- How to create a smooth scrolling effect with CSS?
- How to create a "parallax" scrolling effect with CSS?
- How to Create a Parallax Scrolling Effect in CSS
- How to flip an image (add a mirror effect) with CSS?
- Create a transition effect on hover pagination with CSS
- How to create an image gallery with CSS
- How to create an avatar image with CSS?

Advertisements