CODEWITHSUNDEEP
css
Luke Puplett
Luke Puplett

Reputation: 45105

CSS box-shadow doesn't work

Why doesn't this CSS box shadow work?

HTML

<img src="http://placecage.com/90/90" />

CSS

IMG {
    -webkit-box-shadow: inset 0px 0px 108px 7px #000000;
    -moz-box-shadow: inset 0px 0px 108px 7px #000000;
    -ms-box-shadow: inset 0px 0px 108px 7px #000000;
    -o-box-shadow: inset 0px 0px 108px 7px #000000;
    box-shadow: inset 0px 0px 108px 7px #000000;    
}

I've tried it in all browsers. I've tried it in jsFiddle. I've tried different values. I've tried different ways to express the colour. I've tried many browsers.

Thanks

Upvotes: 1

Views: 11164

Answers (3)

steakpi
steakpi

Reputation: 953

You probably need to contain your image and apply the box-shadow to that, or if possible have the image applied as a background to the container.

HTML

<div class="as-img">
    <img src="http://placecage.com/90/90" />
</div>

<div class="as-background"></div>

CSS

div {
    width:90px;
    height:90px;
    -webkit-box-shadow: inset 0px 0px 108px 7px #000000;
    -moz-box-shadow: inset 0px 0px 108px 7px #000000;
    -ms-box-shadow: inset 0px 0px 108px 7px #000000;
    -o-box-shadow: inset 0px 0px 108px 7px #000000;
    box-shadow: inset 0px 0px 108px 7px #000000;    
}

img{

    opacity:0.5;
}

div.as-background{
    margin-top:20px;
    width:90px;
    height:90px;
    background:url('http://placecage.com/90/90') no-repeat 0 0;
}

Here is a fiddle

You can see that the inset box shadow favors the background image, as you have to reduce opacity to see it directly behind the . Hope that helps.

Upvotes: 1

Max Baldwin
Max Baldwin

Reputation: 3472

You can't use CSS3 inset box shadows on images as described in this article

The best way to achieve this goal is to add an absolute position element, an anchor or div, over the images.

Upvotes: 0

iConnor
iConnor

Reputation: 20189

inset box shadows do not work on image elements.

One way you can achieve this is by having another div overlapping the image element

Here's an example: http://jsfiddle.net/STcTN/2/

<div class="img-container">
    <img src="http://placecage.com/90/90" />    
</div>


.img-container{
    width: 90px; height: 90px;
    position: relative;
}

.img-container:after{
    content: '';
    top:0; left:0; right:0; bottom:0;
    position: absolute;
    -webkit-box-shadow: inset 0px 0px 10px 7px #000000;
    -moz-box-shadow: inset 0px 0px 10px 7px #000000;
    -ms-box-shadow: inset 0px 0px 10px 7px #000000;
    -o-box-shadow: inset 0px 0px 10px 7px #000000;
    box-shadow: inset 0px 0px 10px 7px #000000;    
}

Upvotes: 5

Related Questions