html – box-shadow:inset property does not work on<img>

Question:

I was testing the box-shadow property to make a gallery and noticed that the <img> tag doesn't accept the box-shadow:inset... but it does accept the normal box-shadow .

However if I put the <img> as the background of a div the box-shadow:inset works fine!

My question would be: How to put the box-shadow:inset without having to use the image as a background?

Simple model to exemplify

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
div { 
    width: 200px;
    height: 200px;
    margin: 40px 0;
    background-image: url(http://fillmurray.com/200/200);
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.bs {
    display: block;
    margin: 40px 0;
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.ds {
    filter: drop-shadow(0px 0px 10px red);
    -webkit-filter: drop-shadow(0px 0px 10px red);
}
<div></div>
<img class="bs" src='http://fillmurray.com/200/200' alt=''/>
<img class="ds" src='http://fillmurray.com/200/200' alt=''/>

NOTE: I also tried with the filter:drop-shadow but it doesn't have the inset option

Answer:

I think I've identified the problem with the fact that box-shadow:inset doesn't work on <img> and in short it's because the image is a Replaced element type Replaced element

See what the Mozilla documentation says about Replaced element

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Translation: "In CSS, a substituted element is an element whose representation is outside the scope of CSS; they are external objects whose representation is independent of the CSS formatting model."

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

The W3C says that:

For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. … The content of replaced elements is not considered in the CSS rendering model.

Translation: "For example, the content of the HTML IMG element is often replaced by the image its "src" attribute designates. … The content of the replaced elements is not considered in the CSS rendering model.

Source: https://www.w3.org/TR/CSS21/conform.html#replaced-element

Maybe that's why the image rendering is on top of box-shadow:inset since the control of the image content (src) is not defined by CSS.

Notice that in this code I did an experiment using the object-fit and object-position to move the image inside the " container ". Note that the shadow is there, but it is under the image content (src)

img {
    -webkit-box-shadow: inset 0 0 10px 10px red;
    -moz-box-shadow: inset 0 0 10px 10px red;
    box-shadow: inset 0 0 10px 10px red;
    object-fit: contain;
    object-position: top 25px left 25px;
    border: 1px solid;
}
<img " src='http://fillmurray.com/200/200' alt=''/>

NOTE: In Chrome and Firefox you can see the test, but make sure your browser supports object-fit : https://caniuse.com/#feat=object-fit

Post Views: 1
Scroll to Top