Bootstrap Image Circle Inner Shadow

Question

How can I add an inner shadow to a bootstrap "image-circle"?

jsfiddle

This doesn't work..

.box-shad {
  box-shadow: 0 10px 20px #777 inset, 0 0 200px #000 inset, 0 0 150px #000 inset, 0 0 100px #000 inset;
}

<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">

Thanks for any ideas.

---

SOLUTION:

Put the box shadow on a circular div with background image set to the image, rather than using an image.

Fenn

I don't think you can add a shadow to an image without javascript, you can add the code to a div to see it works – Gayle

Ok any suggestions as to how to do it with js? It would help to see it in the fiddle – Fenn

Answer 1

You can try something like this:

.box-shad {
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

Demo: http://jsfiddle.net/52VtD/1926/

UPDATE

I don't think it's possibile to set an inner shadow because it's an image; you can draw the circle too instead of use an image, so you'll can set the inner shadow.

Code:

.box-shad {
    -webkit-box-shadow: inset 0 0 4px #000;
    -moz-box-shadow: inset 0 0 4px #000;
    box-shadow: inset 0 0 4px #000;
}
.circle {
    width: 140px;
    height: 140px;
    display: inline-block;
    border-radius: 50%;
    background-color: #aaa;
}

Demo: http://jsfiddle.net/52VtD/1943/

Sugared

Thanks a lot for the ideas, but I am looking for an inner shadow.. Any thoughts? – Fenn

@NickB I don't think it's possibile because it's an image, see an alternative in the edit – Sugared

how about add to your class circle background-image: url(placehold.it/140x140);? you got image with inner shadow – Miracle

Yes a combination of this and @schrodingercat's comment worked great. – Fenn

Answer 2

This works to me. Please try it.

.inner-shadow {
  box-shadow: inset 3px 3px 4px black;
  border-radius: 50%;
}
img {
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: -10;
}		

<div class="inner-shadow">
	<img src="http://placehold.it/300x300" alt="">
</div>

Heptahedron

Answer 3

Closest I get is this:

http://jsfiddle.net/52VtD/1941/

<div class="border">
<a class="shadow img-circle"><img class="img-circle"  src="http://placehold.it/140x140" /></a>

CSS:

.border
{
    padding:10px;
    width:160px;        
}

.shadow
{
    display:block;
    position:relative;
}

.shadow img
{
    display:block;       
}

.shadow::before
{
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
}

this article may help http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/

Reservation