Defocus Effect

by kthornbloom

HTML

<div class="defocus">
  <img src="https://picsum.photos/800/800" alt="" id="normal">
  <img src="https://picsum.photos/800/800" alt="" id="defocus">
</div>

SCSS

.defocus {
  position:relative;
  overflow:hidden;
  width:300px;
  img {
    width:100%;
    height:auto;
    transition:scale(1.1);
    transition:.5s;
  }
}

#defocus {
  filter:blur(15px);
  position:absolute;
  top:0;
  -webkit-mask-image: radial-gradient(rgba(0,0,0,.5) 25%, black 50%);
}

.defocus:hover {
  #defocus {
    filter:blur(0px);
    transform:scale(1.3);
    opacity:0;
     transition:1s;
  }
  #normal {
    transform:scale(1.05);
  }
}