CODEWITHSUNDEEP
javascripthtmlcssoverlay
AcidicProgrammer
AcidicProgrammer

Reputation: 204

How to turn an overlay into a giant button

I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.

Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?

...

<style>
body {
margin: 0;
padding: 0;
}

section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9); 
}

#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}

#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}

</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>

...

Upvotes: 2

Views: 134

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206068

You don't necessarily need JS :)

#overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: 2s;
  background: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
}
#overlay-handler:checked ~ #overlay {
  visibility: hidden;
  opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
  <h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>

Upvotes: 2

Daemon Beast
Daemon Beast

Reputation: 2909

You can make the overlay disappear when the body of the HTML is clicked.

<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>

Upvotes: 0

ffflabs
ffflabs

Reputation: 17481

If you set the overlay to have position: fixed and proper z-index it would cover the page by default.

Then declare a click listener on it to either set its display to none or remove it from the DOM.

Just don't use it as a container for the real content

document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('#overlay').addEventListener('click', clickEvent => {
    clickEvent.target.classList.add('invisible');
  });
});
#overlay {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba(100, 100, 100, 0.5);
  padding: 4em 10%;
  text-align: center;
  font-weight: bold;
}

#overlay.invisible {
  display: none;
}
<div id="overlay">
  Click me to interact
</div>
<div>
  This is the real content <a href="https://stackoverflow.com/questions/61034197/how-to-turn-an-overlay-into-a-giant-button">But you can't click me without closing the overlay</a>

</div>

Upvotes: 0

Related Questions