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](http://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