2014年2月28日更新

Question

如何显示鼠标悬停的模糊图像的部分（小部分）？目前它模糊整个图像，但我想要显示鼠标指向的模糊图像部分。

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

Answer 1

我创建了一个jQuery解决方案的小提琴。它模糊了图像的一部分。希望它有所帮助：

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 */
}

2014年2月28日更新

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

更新01 / Mar / 2014

Fiddle : Reveal part of Blurred image

上述小提琴使用Vague.js ，因为 CSS3 模糊可能无法在所有浏览器中使用

<强> 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

我只想发布替代解决方案。它没有很好的浏览器支持，因为它建立在SVG图像，掩码和过滤器上。我已经过测试，它适用于Chrome 33，Safari 6.1.1和Firefox 25.0.1。

让我知道您的想法： jsFiddle

带有倒置遮罩的新版本，用于模糊图像 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

您无法仅使用模糊图像和清晰图像，并使用鼠标位置将清晰部分覆盖到模糊图像上，

不要问+ 9px！ - 我不知道如果图像略有不同我只是用剪切工具切碎它们!!

现在没有时间完善这个小提琴，但随意改善bugginess（边框检查，开始时显示div）

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

    });
});

Answer 4

对此的另一个响应式解决方案是使用DECLARE @MCO INT SET @MCO ='99' -- This will be dynamic variable. I am just setting here for example DECLARE @ALL_MCO TABLE ( MCO_VALUE INT ) INSERT INTO @ALL_MCO VALUES ('1') INSERT INTO @ALL_MCO VALUES ('2') INSERT INTO @ALL_MCO VALUES ('3') SELECT * FROM TEST_TABLE WHERE MCO_ID IN ( CASE WHEN @MCO ='99' THEN (SELECT MCO_VALUE FROM @ALL_MCO) ELSE @MCO END )创建元素，并使用mousemove删除它们，这将创建彗尾效应。

以下是 https://cr8code.co/editor.php?workid=25256f777bc18b76d48a8d72528ef514

链接

Answer 5

我一直在寻找不同的解决方案，我认为最好的想法是使用background-attachment: fixed单独的背景图像，然后将它们叠加在一起。非常轻巧和坚固。

看http://jsfiddle.net/cz737e2L/26/看看我的意思

这就像一个魅力。只是不在不支持background-attachment: fixed的设备上（我包含了一个不包含移动设备的修复程序）。

如何揭示鼠标悬停的部分模糊图像？

5 个答案:

Fiddle

2014年2月28日更新

Fiddle : Reveal part of transparent-overlayed image

更新01 / Mar / 2014

Fiddle : Reveal part of Blurred image

看http://jsfiddle.net/cz737e2L/26/看看我的意思