Make a div transparent like a blurred mirror

blur, css

Solution

This can now be accomplished with a single line of CSS using the `backdrop-filter` property (along with many other filter effects), however browser support at the time of writing is very poor, so make sure to provide a fallback version for unsupported browsers as well as the `-webkit-` prefixed version for now.

.wrapper {
  height: 400px;
  width: 400px;
  background-image: url('https://i.imgur.com/iAgdW.jpg');
  background-size: cover;
}

.inner {
  background-color: rgba(255, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 50px;
}

<div class="wrapper">
  <div class="inner">my text</div>
</div>

The rendered output in supported browsers will look like:

Problem

I want to make a div background transparent so i used this css ``` -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); ``` also see this fiddle: http://jsfiddle.net/LUy3W/ I want only the div to be blurred but all the content in that div is also being blurred. How to make only that background div blur and make its content visible like normal text? any thoughts? please help.

Original source