如何显示模糊图像的一部分，其中鼠标悬停？

本文介绍了如何显示模糊图像的一部分，其中鼠标悬停？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

推荐答案

替代解决方案。它没有伟大的浏览器支持，因为它是建立在SVG图像，掩码和过滤器。我已经测试，它的工作原理在Chrome 33，Safari 6.1.1和Firefox 25.0.1。

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

这篇关于如何显示模糊图像的一部分，其中鼠标悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！