Full page overlay toggle

nur CSS

by marusti

HTML

<div class="wrapper">
  <input type="checkbox" name="toggle" id="toggle" />
  <label for="toggle">label</label>
  <div class="overlay">1<label for="toggle">close</label></div>
</div>

CSS

* {
  margin: 0;
  padding: 0
}

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.overlay {
  position: absolute;
  top: -100vh;
  width: 100vw;
  height: 100vh;
  background: blue;
  transition: 1s;
  color: white;
  text-align: center
}

#toggle:checked~.overlay {
  transition: 1s;
  top: 0;
}