Putting a Inset Box Shadow on an Image or Image Within a Div

Why doesn't inset box-shadow work over images?

Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:

<main>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
    <div class="shadow"></div>
</main>

CSS:

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 3px 3px 10px 0 #000000;
    border-radius: 20px;
    top: 0;
    left: 0;
}

Edit: I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.

https://jsfiddle.net/WymFE/3/

Rendering CSS3 inset shadow with an image

Box-shadow is just above the background on the stacking order when using inset. Therefore, any image you have inside the div will cover the shadow.

Per the W3C Specs

In terms of stacking contexts and the
painting order, the outer shadows of
an element are drawn immediately below
the background of that element, and
the inner shadows of an element are
drawn immediately above the background
of that element (below the borders and
border image, if any).

In other words, Chrome and Opera are doing it correctly (FTR, FF 3.6.13 does the same thing as Opera).

If you want the shadow to overlap the image, you have a few different options, depending on your needs:

Set the image to the background property of the div.
Absolutely position a div over the one with the image, make it the same size, and put the shadow there (not really recommended, as it's convoluted and adds non-semantic markup).
Make sure the backgrounds of the images are transparent (this will allow the shadow to show through, but non-transparent pixels will still cover the shadow).
Consider using border-image and gradient, instead. (This one is also a little convoluted, but puts the gradient in the border itself, and you can fade to transparent using RGBA.)

Inset shadow over an image in CSS

Like this

demo

css

.image { 
   position: relative; 
  -webkit-box-shadow: inset 0 0 10px 10px #000;    
    -moz-box-shadow: inset 0 0 10px 10px #000;
    box-shadow: inset 0 0 10px 10px #000;

}

OR REF LINK

set inner shadow border to be ontop of image inside div

You can just do...

https://jsfiddle.net/hs5g1osv/1/

.thumb_images {
    float: left;
    margin-right: 5px;
    cursor: pointer;
}

.thumb_images img {
    border: 5px solid #ccc;
    -webkit-transition: border .15s ease-in-out;
    transition: border .15s ease-in-out;
}

.thumb_images img:hover {
    border-color: #f00;
}

Make a Box-Shadow Appear Over an Img in a Div On Hover

The box-shadow is set for the parent-Element and you wont be able to display a parent-element on top of its child-element in any good way.

So my approach would be to use an extra div just for the shadow-effect. As you are using position relative for the .box-element we can safely use position: absolute for the child-element here.
You can find my approach with comments as explanations in the following Snippet. I also added a little example to make the parent-child Problem with z-indexes more clear.

.box {
                width:340px;
                height:200px;
                border: solid 4px rgba(54, 215, 183, 1); 
                margin:10px;
                position:relative;
                font-size:30px;
                text-align: bottom;
                transition: font 0.1s ease;
            }
            /*Im not sure if there is a more efficient way but like this we need 2 rules for the hover - effect*/
            .box:hover .shadow{
                box-shadow:0px -20px 40px rgba(35, 203, 167, 1) inset;
            }
            .box:hover{
                font-size:40px;
            }
            #tobaking img {
                margin-top:-40px

            }
            .shadow {
              /*position absolute works because the .box element has position relative*/
              position: absolute;
              /*same position and size as the image*/
              margin-top:-40px;
              width: 350px;
              height: 300px;
              /*in case you want the image to be clickable etc. you need to disable pointer-events on the element thats laying on top*/
              pointer-events: none;
            }
            
            
            /*Example css, no matter how extreme we put the z-index, child Element is in front*/
            .parent {
              margin-top: 100px;
              width: 200px;
              height: 200px;
              background: red;
              z-index: 50;
            }
            .child{
              width: 200px;
              height: 200px;
              background: yellow;
              z-index: -50;
            }

<div class="box" id="tobaking">
        <!--New element above the img, so you dont need z-index-->
        <div class="shadow"></div>
        <img src="https://media1.giphy.com/media/13vSD7ajIJwgb6/source.gif">
        <span class="textspan">Straight to Baking!</span></div>
        
        
        <!--example for the parent-child problem-->
        <div class="parent">
          <div class="child">
          </div>
        </div>

is there a way to have a div with box-shadow inset and normal

You are overwriting the box-shadow value when you add it again.

Instead, use a comma to separate multiple box shadows, like so:

box-shadow: inset 0 0 10px, 0 0 10px;

BoxShadow: inset on img tag

CSS3 inset shadows don’t work on images, but there is a workaround,

Check here: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Box-shadow on image using HTML vs CSS

Unfortunately the box-shadow is part of the parent element so you have to use either a shadow element or a psuedo element.

HTML

<div class="img">
  <img src="https://avatars2.githubusercontent.com/u/1918732?s=460&v=4">
</div>

CSS

img {
  display: block;
}

.img {
  border-radius: 20px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  border-radius: 20px;
  bottom: 0;
  box-shadow: inset 0 0 10px 10px #000;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

Demo