Blur borders on image via css

Question

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?

score 10 · Accepted Answer · edited Mar 30 '19 at 08:31

10

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 class="shadow">
                <img src="http://lorempixel.com/400/200/" />
        </div>

edited Mar 30 '19 at 08:31

Prashanth Benny

1,523
21
33

answered Sep 04 '13 at 12:14

Jamie Hutber

26,790
46
179
291

I assume that the first line is ".shadow" not ".shadow img" yes? It is not working for me although that it clearly should. What's wrong? http://jsfiddle.net/FVfgn/ – sealla Sep 04 '13 at 12:45
:before and :after pseudo elements aren't supported on elements, sadly. See http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags – algoni Sep 04 '13 at 13:11
Updated, I had meant to wrap it in a div :) my bad – Jamie Hutber Sep 04 '13 at 13:14

score 5 · Answer 2 · answered Sep 04 '13 at 12:23

5

Yess it's possible like this:

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

answered Sep 04 '13 at 12:23

Vladimir

377
1
6

Blur borders on image via css

2 Answers2