Unblur part of an image where the mouse hovers over

Question

I've been trying to have an image which appears blurred but when the mouse hovers over, it clears that tiny bit where the cursor points. Much alike the www.canva.com website.

Here is my code so far, it's not working 100%. I'm using HTML, CSS and Javascript. Unfortunately, I'm completely new to javascript!

HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QuoteWall</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/javascript" href="javascript.js">
    </head>
<body>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="image.png" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="image.png" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div>
</div>
</body>
</html>

CSS:

body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

Javascript:

   $('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", upX + 'px');
});

Any help would be appreciated. Thanks, Joe

I don't understand. Do you want to unblur part of image on hover or do you want to unblur the complete image on hover ? — smdsgn, Jan 30 '16 at 09:22
I want to unblur where the mouse is, so part of the image. Very similar to this: www.canva.com — Joe, Jan 30 '16 at 10:38

smdsgn · Accepted Answer · 2016-02-04T06:28:58.377

This is an experimental solution. You dynamically inject a new circle element in your svg mask each mouseover then you hide each circle with a delay.

var svgNS = "http://www.w3.org/2000/svg";

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1')[0];
    
    var circle = document.createElementNS(svgNS,"circle");
    circle.setAttribute("cx", upX);
    circle.setAttribute("cy", upY);
    circle.setAttribute("r", "30");
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
    
    mask.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask.removeChild(circle);
        }, 300);
    }, 300);
});

.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
circle {
   opacity: 1;
   -webkit-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div>

Your HTML should be like this with jQuery before the script I gave you. You have to respect the hierarchy of your scripts.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QuoteWall</title>
        <link rel="stylesheet" type="text/css" href="style.css"> //The css I gave you
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> //jQuery here
        <script type="text/javascript" src="javascript.js"></script> //The script I gave you
    </head>
<body>
  <div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
      <image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
      <filter id="filter2">
        <feGaussianBlur stdDeviation="5" />
      </filter>
      <mask id="mask1">
        <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
      </mask>
      <image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
  </div>
</body>
</html>

Hi @smdsgn ! This looks very interesting, I've given it a go and it's still coming with just a blurred image:/ It's working perfectly in the preview on stackoverflow! Perhaps it's the way I'm putting the javascript/Jquery and CSS in the HMTL file? Thanks for the reply though, it's really helpful:)) — Joe, Feb 03 '16 at 18:19
You probably missed something. Be careful to add jQuery before the script I gave you. If you create a fiddle with your new code, I could tell you what's wrong. — smdsgn, Feb 03 '16 at 21:46
Here's a fiddle with the code: https://jsfiddle.net/uhs3d0ex/1/ Thanks again smdsgn — Joe, Feb 04 '16 at 05:56
Thanks for the fiddle! Just trying to change images etc! Thanks for your help man:) — Joe, Feb 04 '16 at 20:59
If i were to add a new image from my files, how would i do that? The src="" doesn't seem to be working in the . Sorry to be a bother. — Joe, Feb 04 '16 at 21:11
Just change the xlink:href for both image elements. Don't forget to accept the answer if this code helped you. — smdsgn, Feb 04 '16 at 21:35

score 0 · Answer 2 · answered Jan 30 '16 at 09:13

I would recommend that you give id to the div where image is being rendered, So considering id of your image div is divImage like : HTML:

<div id="divImage">
//Your Image inside this div
</div>

So in your JS you can write :

$("#divImage").hover(function(){
//Your Complete on hover function here.
})

I guess this should work.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I would use this How to blur some portion of Image.

have some blur mask (fully filled with blur)
Handle OnMouseMove event

Just clear the blur in mask area around actual mouse position during mouse movement.
On some periodic event like OnTimer

blur out the mask so any cleared space is diminishing with time. Then apply masked blur (from linked Q/A) on your image and paint it into your viewing area.

Unblur part of an image where the mouse hovers over

3 Answers3

Linked