title: Blur previous content
body: <p>I have some content on my page that I would like to blur and hover text over it.</p>
  <p><strong>div</strong> with class <code>nav-user-account</code> is the one that I want to blur and then <strong>div</strong> with class <code>coming-soon</code> should be text above blur part with text <code>coming soon</code>.</p>
  <p>Is there some way how I can blur the whole class <code>nav-user-account</code>and then cancel this blur for class <code>coming-soon</code>?<br>
  How can I achieve this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    padding: 2em;
  }
  .nav-user-account {
    position: relative;
    display: flex;
    line-height: 100%;
    filter: blur(2px);
  }
  .coming-soon {
    filter: one!important;
    position: absolute;
    transform:rotate(15deg);
    font-size: 24px;
    letter-spacing: 0.1em;
    overflow: visible;
    white-space: nowrap;
    color: #c60000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-user-account"&gt;
     &lt;div class="coming-soon"&gt;coming soon&lt;/div&gt;
     &lt;div&gt;
        &lt;a href="#"&gt;Sign in&lt;/a&gt; | &lt;a href="#"&gt;Register&lt;/a&gt; &lt;br /&gt;
        &lt;span class="small"&gt;some text&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>