How do I disable div elements after adding overlay on it?

Question

I'm trying to put overlay on my form. Basically I don't want user to access the form and just block the content by adding overlay. I added overlay but I can still give inputs in input fields. How do I stop that?

.overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  opacity: 0;
  width: 100 %;
  height: 100 %;
  -webkit-transition: all 0.3s ease - in -out;
  -moz-transition: all 0.3s ease - in -out;
  -o-transition: all 0.3s ease - in -out;
  -ms-transition: all 0.3s ease - in -out;
  transition: all 0.3s ease - in -out;
  opacity: 1;
}

 <h1>Hello Plunker!</h1>
<div class="overlay">
  <input type="text">First name
</div>

Answer 1

Like this?

.content {
  text-align: center;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition: all 0.3s ease - in -out;
  -moz-transition: all 0.3s ease - in -out;
  -o-transition: all 0.3s ease - in -out;
  -ms-transition: all 0.3s ease - in -out;
  transition: all 0.3s ease - in -out;
  opacity: 1;
}

.overlay {
  background: rgba(0, 0, 0, .75);
  position: absolute;
  width: 100%;
  height: 100%;
}

<h1>Hello Plunker!</h1>
<div class="content">
  <div class="overlay">
  </div>
  
  <input type="text">First name
</div>

Hope this helps.