<div class="circle front">
  <a href="#"> <img src="http://fillmurray.com/300/300" /></a>
</div>
<div class="circle middle">
  <a href="#"><img src="http://fillmurray.com/200/200" /></a>
</div>
<div class="circle back">
  <a href="#"><img src="http://fillmurray.com/100/100" /></a>
</div>

@import "bourbon";
.circle {
  position: absolute;
  img {
    border-radius: 50%;
  }
  a {
    -webkit-filter: blur(3px);
    @include transition(.6s);
    &:hover {
      -webkit-filter: blur(0px);
    }
  }
}

.front {
  width: 300px;
  height: 300px;
  z-index: 3;
  top: 70px;
}

.middle {
  width: 200px;
  height: 200px;
  z-index: 2;
  top: 50px;
  left: 185px;
}

.back {
  width: 100px;
  height: 100px;
  z-index: 1;
  top: 40px;
  left: 325px;
}