title: Blurred portion over image, solid edges, responsive images
body: <p>I'm trying to replicate the following blur effect with pure HTML/CSS. My current appraoch uses 2 images, the original <strong>cover-image</strong>, then, a 2nd copy of the image <strong>blurred-bg-image</strong> using CSS <code>filter: blur(5px);</code>.</p>
  
  <p>Desired effect:</p>
  
  <p><a href="https://i.stack.imgur.com/UjozT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UjozT.jpg" alt="enter image description here"></a>
  <a href="https://dribbble.com/shots/2061540-Wibee-web-client-profile/attachments/368725" rel="nofollow noreferrer">source</a></p>
  
  <hr>
  
  <p>I can't find any way to keep the bottom portion the height of the toolbar while also retaining a <code>background-image</code> equal to the dimensions of the entire <strong>cover-image</strong>.</p>
  
  <p><code>overflow: hidden</code> doesn't work on a child element when the parent is anything but <code>position: relative</code>. But if the parent is relative, the inner <strong>blurred-bg-image</strong> is not the same dimensions as the <strong>cover-image</strong></p>
  
  <p>Here is the basic setup:</p>
  
  <pre><code>&lt;div class="cover-image"&gt;
      &lt;div class="toolbar"&gt;
          &lt;div class="blurred-bg-image"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The only solution I can find so far is to use <code>clip rect()</code> on <strong>blurred-bg-image</strong>, then calculate where to clip it to. But, this is <strong>not responsive</strong> and includes JS into the mix.</p>