How do I blur a particular area of an image in HTML?

Question

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 image, so I inserted an image within a <div> with an id="background".

And then modified the CSS of it as:

#background{
  position:absolute; 
  top:0;
  left:0;
  z-index:-1;
}

Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.

score 3 · Answer 1 · answered May 26 '18 at 09:02

3

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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>


<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">

answered May 26 '18 at 09:02

Joe Warner

3,335
1
14
41

Sometimes there's a "Script error." coming. Try playing with your snippet. Hovering, going out, hovering, going out of snippet, etc… I don't know exactly when it triggers. – Takit Isy May 26 '18 at 09:33
think that script error is just chromes new error handling for javascript executed in an iframe i believe. "The "Script error." happens in Firefox, Safari, and Chrome when an exception violates the browser's same-origin policy - i.e. when the error occurs in a script that's hosted on a domain other than the domain of the current page." it triggers when it hovers the image – Joe Warner May 26 '18 at 10:15

Temani Afif · Answer 2 · 2018-05-26T10:01:38.897

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));
}

<div class="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));
}

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

</div>

How do I blur a particular area of an image in HTML?

2 Answers2

Related