<!-- We avoid jittering with the css blur effect by having two images, one on top, one on the bottom. The bottom image is blurred. When you hover, the top image opacity is reduced to reveal the blurred image. -->
<a class="blur" href="#">
  <div class="blur--overlay"></div>
  <div class="blur--text-wrap">
    <h2>Blurred</h2>
  </div>
  <div class="blur--img" style="background-image: url(http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg);"></div>
  <div class="blur--img-blur" style="background-image: url(http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg);"></div>
</a>

$blur-amount: 5px;
.blur {
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  height: 300px;
  position: relative;
  text-decoration: none;
  display: block;
}
.blur--overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  transition: background .3s linear;
  background: rgba(0,0,0,.3);
}
.blur--text-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-family: sans-serif;
  color: white;
  // opacity: 0;
  // transform: translateY(30px);
  transition: all .3s ease-out;
}
.blur--img,
.blur--img-blur {
  position: absolute;
  width: calc(100% + #{$blur-amount * 2});
  height: calc(100% + #{$blur-amount * 2});
  right: -$blur-amount;
  bottom: -$blur-amount;
  background-size: cover;
  background-position: center center;
}
.blur--img {
  z-index: 7;
}
.blur--img-blur {
  filter: blur($blur-amount);
}
.blur:hover {
  .blur--text-wrap {
    color: black;
    transform: translateY(0);
    opacity: 1;
  }
  .blur--img {
    opacity: 0;
  }
  .blur--overlay {
    background: rgba(255,255,255,.3);
  }
}