box-shadow inset on img doesn't work

Question

I have given box-shadow to image

box-shadow: 0 0 10px RED inset

but the shadow is not appearing on image, if i change path of image by using firebug then i can see that shadow is in the back side of image.

I want to give shadow on the image, Please help

Answer 1

Solution 1

Use CSS Positioning techniques to achieve that.... Here, first of all am wrapping the image in a div element and later am using CSS pseudo :after element which is positioned absolute with an inset box-shadow

Now make sure you've set the container element, in this case it's a div element to position: relative; else your shadow will fly out in the wild.

Demo

div:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 12px blue;
    top: 0;
    left: 0;
    z-index: 1; /* You can use higher to ensure that it stays on top */
}

I forgot to use the z-index property so use it for the absolute positioned pseudo to ensure that it stays on the top always...

Also, would like to make a note here that if you want the div to be side by side, you will need float or display: inline-block; as div elements are block in nature and will take 100% of the document width...

Demo (z-index included in this demo)

---

Solution 2

If for some reason you want to ignore the use of :after pseudo (I don't see any reason of doing that as it's supported on IE8 as well) so you can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo 2 (Just playing with the z-index property)