putting a inset box shadow on an image or image within a div

css

Solution

Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.

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

Problem

I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset box shadow to display? HTML: ``` <body> <div id="logo"> <img src="images/key.jpg" width="3%" height="3%"/> </div> <a href="scene2.html" class="next">Next</a> <a href="abduction.html" class="back">Back</a> <img src="images/scene1.jpg" width="650" height="650" class="backing"/> </body> </html> ``` CSS ``` .backing { position:relative; z-index:-10; float:left; margin-left:12%; box-shadow: 0 0 -50px -50px #FFF; -moz-box-shadow: 0 0 -50px -50px #FFF; -webkit-box-shadow: 0 0 -50px -50px #FFF; } .next { position:relative; margin-left:8%; z-index:200; } .back { position:relative; margin-left:2%; z-index:220; } ```

Original source