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

Question

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

Answer 1

Here’s a clean, simple and modern approach of CSS pseudo-elements to place a box shadow “on top of an image”, since img tags themselves don’t support pseudo-elements.

HTML:

CSS:

.box-shadow {
    position: relative;
    text-align: center;
}

.box-shadow::after {
    box-shadow: inset 0 0 10px 10px #000;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.box-shadow img {
    max-width: 100%;
    width: auto;
}

View the accompanying JSFiddle.