title: Overlay a blur effect but still have text highlightable
body: <p>So I have two elements inside of my webisite. What I want to do is have a blur effect on the page and overlapping my text, but only the outside. I want the text to still be editable, highlightable, and whatnot. At the moment I have two classes, a main class where the text goes in, and a overlay class that should overlap the main class.</p>
  
  <pre><code>.main{
      top:50px;
      position:relative;
      width:75%;
      margin:auto;
      margin-top:50px;
      margin-bottom:50px;
      border-radius: 4px;
      padding: 0.1in;
      background-color: rgba(48, 48, 48, 0.75);
      box-shadow: 0px 0px 50px rgba(120, 120, 120, 0.50);
      z-index:0;
  }
  
  .overlay{
      opacity:0.8;
      filter: blur(0.1in);
      -webkit-filter: blur(0.1in);
      -moz-filter: blur(0.1in);
      -ms-filter: blur(0.1in);
      -o-filter: blur(0.1in);
      width:100%;
      height:100%;
      z-index:1;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xyphqvoo/" rel="nofollow"><strong>JSfiddle Demo</strong></a></p>