fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
Adding JavaScript to OPEN and CLOSE the Overlay Effect

In this post I share with you the JavaScript code to turn on and off the overlay effect.

Remember by default when the user lands on your website or webpage the overlay is displayed to none or hidden in the CSS file.

So it will be the role of Javascript to open and close the overlay when users click or hover on a certain element depending on the type of the event you set to trigger the overlay.


In order to get this javascript code working, first check out this CSS part or tutorial that I created first to design the overlay effect.

  • TITLE::
    Learn how to create an overlay effect with CSS.
  • LINK:: Learn more
Tutorial Javascript Code.

Below is the simple javascript that i wrote to open and close the overlay effect.


document.addEventListener('DOMContentLoaded', () => {

const openBtn = document.querySelector('#openOverlay');
const closeBtn = document.querySelector('#closeOverlay');
const overlay = document.querySelector('.overlay');

openBtn.addEventListener('click', () => { = 'block';

closeBtn.addEventListener('click', () => { = 'none';


Related Post(s)

» Learn how to Switch Between Dark and Light Mode With CSS and Javascript

» Learn how to animate the value of the placeholder attribute with JAVASCRIPT

» How to Animate Font Awesome Icons With Javascript

» Create a simple currency converter - HTML/Javascript

» How to create a Dynamic GO BACK button on a 404 Error Page

collections_bookmark Category :: Javascript
date_range Published :: 2 weeks ago At: 12:30 AM
event_note Detailed Date :: Jun 21st, 2020
person Writer :: Code