Boxshadow inset not working

Question

I'm using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it's still not working.

Visit the website here.

Code

box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;

Chitterlings

Answer 1

It has nothing to do with your syntax. It's just a peculiarity of an img element, not the box-shadow property.

Consider looking at this example: http://jsfiddle.net/YhePf/ - if you disable showing images in your browser - you will see that instead of an image there will be a green block with the box-shadow applied to it.

Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it's under the image itself (just like the background-color property). I may prove that with another fiddle. It's different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ - see the red 2px shadow and the green background

Waterhouse

Answer 2

I think you might just be missing the spread radius value from the first shadow. :)

Jerid

I believe the code is correct. Code from generators like: box-shadow: inset 5px 3px 3px 5px #4444; Not working. – Chitterlings

Yep, you're right. Sorry. Inner shadows can be applied to imgs though. Check this out: http://jsfiddle.net/Mfkj4/. It might be to do with not having a display:block property, but I'm not sure if it's needed. – Jerid

Yeah, I think Skip405 was right. I think you'd need to add another div for the images to sit in. Add the inset shadows to this and then use the z-index property to bring it forward. – Jerid

Also, you could use a table instead of row divs. ;) – Jerid

Answer 3

i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div. for more detail chk it out http://jordandobson.com/_expirements/css/vignette/

Mohawk

I believe my code is now applied directly on div class called: "jg_photo". Take a look in firebug etc. – Chitterlings

I have already checked that's why i m saying "img.jg_photo" its your class name and its applied on img tag. as class itself defined it can be work only with img tag so so try to apply all your style on div rather then a img tag. hope you understand my point – Mohawk

Answer 4

You can do this with a parent wrapper in most circumstances, tho you may not have a good tag to work with in some situations:

<div id=imgBox>
  <img id=insetPlz ... />
</div>

CSS:

#imgBox {
  position: relative;
  
  &:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 1;
    box-shadow: inset 0 0 10px 5px #000;
  }
}

Niggard