Blur borders on image via css

Problem

I'm trying to do something like this:

example

I think it could be done using background image and another image (mask) above it with a transparent center. But is it possible to do the same with pure css?

Problem courtesy of: sealla

Solution

Whilst you can't apply a box-shadow directly to an image you could apply it with a :before or :after

HTML

    <div class="shadow">
            <img src="http://lorempixel.com/400/200/" />
    </div>

CSS

.shadow
{
    display:block;
    position:relative;
}

img {
    width: 100%;
    height: 100%;
}

.shadow:before
{
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
    box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
}
Solution courtesy of: Jamie Hutber

Discussion

Yess it's possible like this:

.img {
border:1px solid black;
}
.img:hover {
border: none;
box-shadow: 0 0 10px black inset;
}
Discussion courtesy of: Vladimir

This recipe can be found in it's original form on Stack Over Flow.