How to create an overlay effect with CSS and JS

Overlay effect involves overlaying one element on top of another, such as an image or a video, to provide a visually appealing presentation. Overlay effect is used in web design to highlight certain content or provide a visual focus on specific elements. By combining CSS and JavaScript, we can easily create an overlay effect that adds an extra layer to the page and captures user attention.

Here are the steps to create an overlay effect:

Step 1: Setting up the HTML structure

To get started, open a plain text editor or an HTML editor of your choice. Create a new file and save it with a .html extension. Start by adding the HTML structure using nested div tags:

<html>
<head>
</head>
<body>
<div class="overlay-container" onclick="toggleOverlay()">
  <div class="overlay-content">Overlay Text</div>
</div>
<div>
  <h2>Overlay Effect</h2>
  <button onclick="toggleOverlay()">Toggle Overlay</button>
</div>
</body>
</html>

In the HTML code above, we have an overlay-container div that will serve as the backdrop for our overlay effect. Inside the overlay container, we have a nested div element with the class overlay-content that represents the content we want to display on the overlay. Below the overlay container, we have a heading and a button that will be used to toggle the overlay effect.

Step 2: Styling the overlay container

Open your CSS file and style the overlay-container:

.overlay-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items:center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

Here is the explanation of the above styling:

  • The position is set to be fixed so that it will be positioned relative to the browser window and not scroll with the page content.

  • The display is set to flex, to allow child components to be arranged. This allows us to center overlay content vertically and horizontally by setting align-items and justify-content to center respectively.

  • The width and height is set to be 100% of its containing element, in this case, the entire width and height of the browser window.

  • The background-color is set to a semi-transparent black color. The color is defined using RGBA values, where the first three values (0, 0, 0) represent the RGB color (black), and the fourth value (0.5) represents the opacity (50%). This creates a semi-transparent overlay effect, allowing the underlying content to be partially visible.

Step 3: Styling the overlay content

Inside the overlay-container, we have the overlay-content class that represents the overlay content. Set its position to absolute with respect to the overlay-container and apply custom styles to make it visually appealing.

.overlay-content{
  position: absolute;
  font-size: 50px;
  color: white;
  background-color: rgb(232, 130, 130);
  padding:20px;
}

Here is the explanation:

  • The position is set to absolute, meaning its position is relative to its closest positioned ancestor.

  • The font-size property is set to 50 pixels, specifying the size of the text within the overlay content.

  • The color property is set to white, determining the color of the text within the overlay content.

  • The background-color property is set to rgb(232, 130, 130), which represents a shade of red. This defines the background color of the overlay content.

  • The padding property is set to 20 pixels, which creates space between the content and the edges of the overlay.

Step 4: Enabling overlay toggle

To create an interactive overlay effect, we can add event listeners to the overlay container and the toggle button, which will trigger the toggleOverlay() function when clicked. Here's how you can achieve this in JavaScript:

function toggleOverlay() {
  var overlay = document.getElementsByClassName("overlay-container")[0];
  overlay.style.display = (overlay.style.display === "flex") ? "none" : "flex";
}

In the code above, we define a function called toggleOverlay(). Inside this function, we retrieve the overlay container element using document.getElementsByClassName(). By checking the display style property, we toggle the overlay visibility between flex (visible) and none (hidden). This allows us to show and hide the overlay effect with each click, creating an interactive overlay experience.

Step 5: Running the app

Place the code in appropriate files and open the HTML file in a web browser. Here's a sample example of a toggleable overlay effect using HTML, CSS, and JavaScript:

Conclusion

We've successfully created a toggleable overlay effect using HTML, CSS, and JavaScript. We set up the HTML structure with an overlay container and styled it to cover the screen with a semi-transparent background. Additionally, we applied styles to the overlay content itself.

The implementation of a JavaScript function allowed us to enable interactivity, giving users the ability to toggle the overlay on and off. The end result is a visually appealing and engaging overlay effect on the webpage.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved