Наложить на фото на сайте размытие, а при наведении мыши деразмытие?

Question

[Viplayer]

Может, кто-то замечал, что на некоторых сайтах есть "сайтбар", где фото размытое, но когда наводишь мышкой, то область вокруг мыши становится четкой, но только область. Как можно такое сделать? CSS нужен? Ну, JS чтобы получить координаты мыши и задать радиус четкости.

Answer 1

[deepblack]

Раз
Два

Оригинал ответа на stackoverflow

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

body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

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

Comments

[Viplayer]

О, класс, то что нужно, благодарю)