Boxshadow: Inset on Img Tag

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/

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/

box-shadow inset on img doesn't work

Solution 1

Use CSS Positioning techniques to achieve that.... Here, first of all am wrapping the image in a div element and later am using CSS pseudo :after element which is positioned absolute with an inset box-shadow

Now make sure you've set the container element, in this case it's a div element to position: relative; else your shadow will fly out in the wild.

Demo

div:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 12px blue;
    top: 0;
    left: 0;
    z-index: 1; /* You can use higher to ensure that it stays on top */
}

I forgot to use the z-index property so use it for the absolute positioned pseudo to ensure that it stays on the top always...

Also, would like to make a note here that if you want the div to be side by side, you will need float or display: inline-block; as div elements are block in nature and will take 100% of the document width...

Demo (z-index included in this demo)

Solution 2

If for some reason you want to ignore the use of :after pseudo (I don't see any reason of doing that as it's supported on IE8 as well) so 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 2 (Just playing with the z-index property)

How to add inset box-shadow to image?

For image you'll need to overlap it with a DIV (or SPAN) element with that box-shadow.

_pseudo-code:

<common container>
    <image>
    <shadow>
</common container>

You can use the pseudo :after to create the shadowed element:

.imageStyler{

  overflow:hidden;

  display:inline-block;

  position:relative;

  border-radius:5px;

}

.imageStyler img{

 vertical-align:middle;

}

.imageStyler:after{

  content: "";

  position: absolute;

  width: 100%; height: 100%;

  left: 0; top: 0;

  box-shadow: inset 1px 1px 10px #555;

}

    <span class="imageStyler">

        <img src="//placehold.it/100x100/f0f">

    </span>

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.)

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

box-shadow on img in CSS

looks like you can:

.image_carousel img {

  margin-right: 14px;

  display: block;

  float: left;

  box-shadow: 3px 3px 1px #ccc;

  -webkit-box-shadow: 3px 3px 1px #ccc;

  -moz-box-shadow: 3px 3px 1px #ccc;

}

<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt="Sample Image"/></div>

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>

How to add inner shadow to image in CSS

Add display: block to the img elements to remove the padding below. This is because img elements are rendered inline by default. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block. See demo below:

/* apply a natural box layout model to all elements */

*, *:before, *:after {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

.shadow {

  display: inline-block;

  position: relative;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;

  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;

  -webkit-transition: box-shadow 0.2s ease-in;

  -moz-transition: box-shadow 0.2s ease-in;

  transition: box-shadow 0.2s ease-in;

}

.shadow:hover {

  -moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;

  box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;

}

.shadow img {

  max-width: 100%;

  position: relative;

  z-index: -1;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  display: block; /* ADDED */

}

.column {

  float: left;

  width: 25%;

  padding: 0 15px;

}

<div class="column">

  <div class="shadow">

    <img src="http://fillmurray.com/250/250">

  </div>  

</div>

<div class="column">

  <div class="shadow">

    <img src="http://fillmurray.com/370/370">

  </div>

</div>

<div class="column">

  <div class="shadow">

    <img src="http://fillmurray.com/200/200">

  </div>

</div>

<div class="column">

  <div class="shadow">

    <img src="http://fillmurray.com/400/400">

  </div>

</div>

Boxshadow: Inset on Img Tag