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>

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>

• javascript
• jquery
• html
• css

• Your input is a child of that .overlay element. You need the parent to positioned relative, then the overlay inside that parent with a positioning of absolute. – Joshua Commented Nov 11, 2016 at 7:59
• With CSS using pointer-events: none; add this to overlay class. – Devesh Chauhan Commented Nov 11, 2016 at 12:56

3 Answers 3

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.

Try this

.wrapper {
  position: relative;
}
.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
}
.form-wrapper {
  text-align: center
}

<div class="wrapper">
  <div class="overlay"></div>
  <div class="form-wrapper">
    <input type="text">First name
  </div>
</div>

A very simple & efficient way of doing this without extra & unnecessary divs is using ::after pseudo class. It makes layering very easy.

HTML

<div class="form">
  First name
  <input type="text">
</div>

CSS

.form{
width:300px;    /*Or what ever width you choose*/
height:400px;     /*Or what ever height you choose*/
position: relative;
z-index:1;
}

.form:after{
position:absolute;
height: 100%;
width:100%;
content:'';
z-index:5; /* Make sure this value is higher than the .form class  */
top:0;
left:0;
}

This is should do it :) Here is a fiddle for a working demo.