<input type="checkbox" id="toggle">
<label for="toggle">Open Overlay</label>

<dialog >
  <p>
    
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit aliquam est iusto!
  </p>
    
  
  <label for="toggle">close overlay</label>
</dialog>

body{
  font-family: monospace;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin:0;
  padding: 0;
  width: 100%;
}
#toggle{
  visibility: hidden;
  opacity: 0;
  position: relative;
  z-index: -1;
}

#toggle:checked ~ dialog {
  display: block;
}

label{
  background: skyblue;
  color: white;
  padding: .5em 1em;
  border-radius: 4px;
}
@keyframes appear {
  0%{
    opacity: 0;
    transform: translateY(-10px);
  }
}

dialog{
  animation: appear 350ms ease-in 1;
  max-width: 500px;
}