CODEWITHSUNDEEP
htmlcss
Vaxo Basilidze
Vaxo Basilidze

Reputation: 1057

Why blur filter does not work in this example

I'm trying to give my form background which blurs everything behind it. There will be some content behind the form. I want this content to be visible but blurred. Should be some kind of glass effect. I'm using filter: blur(10px); effect. I've checked several tutorials and videos, but still can't make it to work. What am I doing wrong? Here is the fiddle:

http://jsfiddle.net/xceg89m1/

body {
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  color: white;
}

#register {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 100%;
  z-index: 11000;
  display: table;
  color: white;
}

#registerBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#registerForm {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 32px rgba(0,0,0,0.7);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  background: inherit;
}

#registerForm .blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  transform: translate(-20%, -20%);
  filter: blur(5px);
  z-index: -1;
}
<body>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="register">
        <div id="registerBlock">
          <div id="registerForm">
            <h2>Please complete below form</h2>
            <p><span class="error">* required field</span></p>
            <form method="post">
              Name: <input type="text" name="name" value="">
              <span class="error">*</span>
              <br><br>
              E-mail: <input type="text" name="email" value="">
              <span class="error">*</span>
              <br><br>
              Website: <input type="text" name="website" value="">
              <span class="error"></span>
              <br><br>
              Comment: <textarea name="comment" rows="5" cols="40"></textarea>
              <br><br>
              <input type="submit" name="submit" value="Submit">
            </form>
            <div class="blur"><img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" width="100%" height="100%"/></div>
          </div>
        </div>
      </div>
</body>

Upvotes: 0

Views: 2662

Answers (2)

Kaushik Andani
Kaushik Andani

Reputation: 1302

You can achieve blur effect this way

body {
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  color: white;
}

.test{
  filter: blur(1px);
}

#register {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 100%;
  z-index: 11000;
  display: table;
  color: white;
  filter: blur(0px) !important;
}

#registerBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#registerForm {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 32px rgba(0,0,0,0.7);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  background: inherit;
}

#registerForm .blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: url(https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg);
  background-size: cover;
  transform: translate(-20%, -20%);
  opacity:0.5;
  filter: blur(5px);
  z-index: -1;
}
<body>
<div class="test">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="register">
        <div id="registerBlock">
          <div id="registerForm">
            <h2>Please complete below form</h2>
            <p><span class="error">* required field</span></p>
            <form method="post">
              Name: <input type="text" name="name" value="">
              <span class="error">*</span>
              <br><br>
              E-mail: <input type="text" name="email" value="">
              <span class="error">*</span>
              <br><br>
              Website: <input type="text" name="website" value="">
              <span class="error"></span>
              <br><br>
              Comment: <textarea name="comment" rows="5" cols="40"></textarea>
              <br><br>
              <input type="submit" name="submit" value="Submit">
            </form>
            <div class="blur"><img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" width="100%" height="100%"/></div>
          </div>
        </div>
      </div>
</body>

Upvotes: 1

Scopestyle
Scopestyle

Reputation: 665

Blur actually blurs content inside that object. It doesn't blur everything beneath the div. For example, if you add the image inside of the div, you will notice the blur effect works as expected.

<div class="blur">
    <img src="https://thecentraltrend.com/wp-content/uploads/2017/02/tunnel.jpg" />
</div>

Upvotes: 2

Related Questions