How to reveal part of blurred image where mouse is hovered?

Question

How to reveal part(small portion) of blurred image where mouse is hovered??Currently it blurs whole image but I want the part of the blurred image where the mouse i

Answer 1

I have created a fiddle with a jQuery solution.It blurs hovered part of image .Hope it helps:

Fiddle

jQuery

$('.pic').mousemove(function(event){
    event.preventDefault();
    var upX=event.clientX;
    var upY=event.clientY;
    $('#blurr').css({'display':'block','top':''+(upY-15)+'px','left':''+(upX-15)+'px'});
});

CSS

.pic{
    display:inline-block;
}
/*below CSS for the blurring div*/
#blurr{
    position:absolute;
    display:none;
    width:30px;
    height:30px;
    background-color:rgb(240,240,240);
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    box-shadow:0px 0px 10px 10px white;
    -moz-box-shadow:0px 0px 10px 10px white;
    -webkit-box-shadow:0px 0px 10px 10px white;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

---

Update 28/Feb/2014

Fiddle : Reveal part of transparent-overlayed image

HTML

<div id="container">
    <div class="blurPic"></div>
    <img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
}
#container{
    position:relative;
}
.blurPic{
    position:absolute;
    top:0px;
    left:0px;
    width:0px;
    height:0px;
    box-shadow:0px 0px 0px 160px white inset; 
    -moz-box-shadow:0px 0px 0px 160px white inset; 
    -webkit-box-shadow:0px 0px 0px 160px white inset; 
    -ms-box-shadow:0px 0px 0px 160px white inset; 
    opacity:0.9;
    filter:alpha(opacity=0.9); /* For IE8 and earlier */
}

jQuery

/**Give equal width and height as <img> to .blurPic**/
var hgt = $('.blurPic').width($('#container img').width());
$('.blurPic').height($('#container img').height());
/*****************************************************/

/*******Get shadow values*****/
var result = $('.blurPic').css('boxShadow').match(/(-?\d+px)|(rgb\(.+\))/g)
var color = result[0],
    y = result[1],
    x = result[2],
    blur = result[3];
/******************************/

/**Change box-shadow on mousemove over image**/
var blurStartW = hgt.width()/2;
var blurStartH = hgt.height()/2;
$('.blurPic').mousemove(function(event){
    event.preventDefault();
    var scrollLeftPos = $(window).scrollLeft(),
    scrollTopPos = $(window).scrollTop(),
    offsetLft = hgt.offset().left,
    offsetTp = hgt.offset().top;
    var upX=event.clientX;
    var upY=event.clientY;
    $(this).css({boxShadow : ''+(-offsetLft+upX-blurStartW+scrollLeftPos)+'px '+(-offsetTp+upY-blurStartH+scrollTopPos)+'px 20px 100px white inset'});
});
/*********************************************/

/***reset box-shadow on mouseout***/
$('.blurPic').mouseout(function(){
    $(this).css({boxShadow : '0px 0px 0px 160px white inset'});
});
/**********************************/

---

Update 01/Mar/2014

Fiddle : Reveal part of Blurred image

The above fiddle uses Vague.js because CSS3 blurring may not work in all browsers

HTML

<div id="container">
    <img src="http://i.imgur.com/IGKVr8r.png" alt="follow picture" />
    <div class="revealPic"></div>
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
}
#container{
    position:relative;
    margin-left:100px;
    display:inline-block;
}
.revealPic{
    position:absolute;
    top:0px;
    left:0px;
    background-image:url('http://i.imgur.com/IGKVr8r.png');
    background-color:white;
    background-position:0px 0px;
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    /*making div circular*/
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -ms-border-radius:50%;
    -khtml-border-radius: 50%;
}

jQuery

var hgt = $('#container'),
    bgt = $('#container .revealPic');

var bgtHalfW = bgt.width()/2,
    bgtHalfH = bgt.height()/2;

/**Change position of .revealPic and background-image within it on mousemove over container**/
hgt.mousemove(function(event){
    event.preventDefault();
    bgt.show();
    var scrollLeftPos = $(window).scrollLeft(),
    scrollTopPos = $(window).scrollTop(),
    offsetLft = hgt.offset().left,
    offsetTp = hgt.offset().top;
    var upX=event.clientX;
    var upY=event.clientY;
    bgt.css({backgroundPosition : ''+(offsetLft-upX+bgtHalfW-scrollLeftPos)+'px '+(offsetTp-upY+bgtHalfH-scrollTopPos)+'px',top:''+(-offsetTp+upY-bgtHalfH+scrollTopPos)+'px',left:''+(-offsetLft+upX-bgtHalfW+scrollLeftPos)+'px'});
});
/*********************************************/

/*Hide .revealPic div on mouseout*/
hgt.mouseout(function(){
    bgt.hide();
});
/*********************************/

/*Using vague.js to make blurred image*/
var vague = $("#container img").Vague({intensity:10});
vague.blur();
/**************************************/

Answer 2

I just want to post an alternative solution. It doesn't have great browser support as it is built on SVG images, masks and filters. I have tested and it works in Chrome 33, Safari 6.1.1 and Firefox 25.0.1.

Let me know what you think: jsFiddle

New version with inverted mask for blurred image jsFiddle

HTML + SVG

<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://i.imgur.com/IGKVr8r.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="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div>

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

Answer 3

Another responsive solution to this is creating element with mousemove and delete them with timeout(function which will be creating a comet tail effect.

Here is the link https://cr8code.co/editor.php?workid=25256f777bc18b76d48a8d72528ef514

Answer 4

I've been looking at different solutions, and I think the best idea is to use separate background-images with background-attachment: fixed and just overlay these on top of each other. Very lightweight and robust as well.

Look at http://jsfiddle.net/cz737e2L/26/ to see what I mean

This works like a charm. Just not on devices that don't support background-attachment: fixed (I included a fix for that that excludes mobile devices from use).

Answer 5

Couldn't you use just a blurred image and a clear image and overlay the clear portion onto the blurred image using the mouse position,

Dont ask about the +9px! - I dunno if the images are slightly different I just chopped them with snipping tool!!

Dont have time to perfect this Fiddle right now but feel free to improve the bugginess(border check, div showing at start)

http://jsfiddle.net/kWWXX/

$('#blurpic').mousemove(function(e){
    var xpos = e.pageX - this.offsetLeft;
    var ypos = e.pageY - this.offsetTop;


    $('#clearpic').css({
       left:  xpos,
       top:   ypos,
       backgroundPositionX: -xpos,
       backgroundPositionY: -ypos

    });
});

$('#clearpic').mousemove(function(e){
    var xpos = e.pageX -25
    var ypos = e.pageY -25


    $('#clearpic').css({
       left:  xpos,
       top:   ypos,
       backgroundPositionX: -xpos +9 ,
       backgroundPositionY: -ypos +9

    });
});