Blurred image with sharp edge

by farazshaikh

HTML

<body>


  <div class="image-wrapper">

    <img class="image" src='https://picsum.photos/id/10/600/367'/>

  </div>


</body>

CSS

.image-wrapper{
  width: 300px;
  height: 200px;
  overflow: hidden
}

.image-wrapper .image{
  transform: scale(1.25);
  filter: blur(5px);
}