title: CSS Blur causing a bit of a position/height shift on span without filter
body: <p>I've created a snippet to demonstrate the issue I have, essentially, once you hover over one of the boxes, the span label seems to change</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#mobile--categories__wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  div#mobile--categories__wrapper a.mobile--category__link {
    margin: 5px;
    text-decoration: none;
    width: calc(50% - 10px);
    position: relative;
    height: 200px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.75);
    border-radius: 5px;
  }
  
  div#mobile--categories__wrapper img.mobile--category__img {
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
  
  div#mobile--categories__wrapper a.mobile--category__link img.mobile--category__img {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    transition: 0.2s all ease-in;
  }
  
  div#mobile--categories__wrapper a.mobile--category__link:hover img.mobile--category__img {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    transition: 0.2s all ease-in;
  }
  
  div#mobile--categories__wrapper span.mobile--category__label {
    width: 100%;
    display: block;
    text-align: center;
    height: 100%;
    line-height: 200px;
    z-index: 10;
    position: relative;
  }
  
  div#mobile--categories__wrapper span.mobile--category__label {
    width: 100%;
    display: block;
    text-align: center;
    height: 100%;
    line-height: 200px;
    z-index: 10;
    position: absolute;
  }
  
  span.mobile--category__label {
    position: relative;
    height: 75px !important;
    background-color: rgba(0, 0, 0, 0.75);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 75px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mobile--categories__wrapper"&gt;
    &lt;a class="mobile--category__link"&gt;
      &lt;img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" /&gt;
      &lt;span class="mobile--category__label"&gt;label goes here&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="mobile--category__link"&gt;
      &lt;img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" /&gt;
      &lt;span class="mobile--category__label"&gt;label goes here&lt;/span&gt;
    &lt;/a&gt;
    &lt;!-- &lt;a class="mobile--category__link"&gt;
      &lt;img src="" class="mobile--category__img"/&gt;
    &lt;/a&gt;
    &lt;a class="mobile--category__link"&gt;
      &lt;img src="" class="mobile--category__img"/&gt; --&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need to stop the label from shifting height by a couple of pixels on the hover blur effect I've given to the image before/below the label. What causes this and how could I fix it?</p>