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.

Tutorial

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', () => {
overlay.style.display = 'block';
});


closeBtn.addEventListener('click', () => {
overlay.style.display = 'none';
});


});