Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

jquery

css

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);
}
like image 593
Anoop Chandra Avatar asked Feb 26 '14 17:02

Anoop Chandra


People also ask

How do you blur an image on hover?

To achieve Blurred Image hover effectStyle all images with class:img-4 by setting its blur method value to 4px and so that all images with class:img-4 turns into a blur. and add the transition property for the smooth effect.


2 Answers

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');
});
like image 134
Mathias Avatar answered Oct 21 '22 22:10

Mathias


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();
/**************************************/
like image 22
Zword Avatar answered Oct 21 '22 20:10

Zword