How to create an overlay effect with CSS?

CSS Web Development Front End Technology

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 −

AmitDiwan

Published on 07-May-2020 11:49:00

Previous Page Print Page