How Do I Blur A Particular Area Of An Image In Html?

The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/ Steps that I followed: I found no way to blur a background im

Solution 1:

https://github.com/thdoan/magnify

A simple way would to use magnify to zoom over the already blurred image.

$(document).ready(function() {
  $('.zoom').magnify();
});

img {
 -webkit-filter: blur(10px);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" /><imgsrc="http://via.placeholder.com/350x150"class="zoom"data-magnify-src="http://via.placeholder.com/350x150">

Solution 2:

Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:

var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();

document.body.onmousemove = function(e) {
  /*Adjust the clip-path*/
  image.style.setProperty('--x',(e.clientX-p.top)+'px');
  image.style.setProperty('--y',(e.clientY-p.left)+'px');
}

.blur {
  display:inline-block;
  width:400px;
  height:200px;
  position:relative;
}
.blur:before,
.blur:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--i);
}
.blur:before {
  filter:blur(5px) grayscale(60%);
}
.blur:after {
  clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}

<divclass="blur"style="--i:url(https://picsum.photos/400/200?image=1069)"></div>

With this solution you can easily do the oppsite if you want to blur a part of the image on hover:

var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();

document.body.onmousemove = function(e) {
  /*Adjust the clip-path*/
  image.style.setProperty('--x',(e.clientX-p.top)+'px');
  image.style.setProperty('--y',(e.clientY-p.left)+'px');
}

.blur {
  display:inline-block;
  margin:50px;
  width:200px;
  height:200px;
  position:relative;
}
.blur:before,
.blur:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--i);
}
.blur:after {
  filter:blur(5px);
}
.blur:after {
  clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}

<divclass="blur"style="--i:url(https://picsum.photos/200/200?image=1069)"></div>