Blur borders on image via css

I'm trying to do something like this:

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?

2 Answers

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

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

 <div> <img src="" /> </div>

Yess it's possible like this:

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