13

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 is pointing to be revealed.

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Anoop</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="blur pic">
            <img src="adv_logo.png" alt="plane">
        </div>
    </body>
</html>

CSS

.blur img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(1px);
}
Zword
  • 6,605
  • 3
  • 27
  • 52
Anoop Chandra
  • 161
  • 1
  • 1
  • 6
  • 1
    Welcome to SO. Please consider researching before you ask, and as a heads up this isn't a site where you ask for code. Cheers! – Idris Feb 26 '14 at 17:49
  • 1
    Welcome to SO! Unfortunately, your question is not a good fit for the site. Have you made any attempts at solving this yourself? If so, please include them and your current CSS/HTML Markup in your post. If not, make an attempt first and then come back and post once you have gotten stuck. – Dryden Long Feb 26 '14 at 17:50
  • Thanks for providing your css/html. How is this not working the way you want? – Teepeemm Feb 26 '14 at 18:04
  • it blurs whole image but i want the part of the image where the mouse is pointing to be blurred – Anoop Chandra Feb 26 '14 at 18:06
  • @AnoopChandra your comment above confused me and made me to post the first fiddle which blurs part of the image where mouse is hovered – Zword Mar 02 '14 at 09:28

5 Answers5

24

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();
/**************************************/
Community
  • 1
  • 1
Zword
  • 6,605
  • 3
  • 27
  • 52
  • thank you for your answer but its not what i want what i need is initially the image will be blurred and when i hover my mouse around the image it must reveal the image at that particular position something like this http://www.canva.com/' – Anoop Chandra Feb 28 '14 at 17:39
  • @AnoopChandra i will try to create a fiddle.Check for it later – Zword Feb 28 '14 at 18:19
  • cant you blur the image what you have done is adding overlay i need to blur the whole image – Anoop Chandra Mar 01 '14 at 06:38
18

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');
});
Mathias
  • 5,642
  • 2
  • 31
  • 46
2

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

    });
});
Steven Martin
  • 3,150
  • 1
  • 20
  • 27
1

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

Güney Saramalı
  • 791
  • 1
  • 10
  • 19
0

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).

Aart den Braber
  • 864
  • 1
  • 11
  • 23