How come my div isn't appearing above my image?

Question

Been troubleshooting this for hours. There's got to be a simple reason or solution that I'm not seeing.

I just want to have an inset box-shadow over the top of my image.

Here is the code I have currently:

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0  25px red inset;
    z-index: 2 !important;
}

.img-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1 !important;
}

<div class="img-container"> 
    <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
 </div>

can you be more specific about what exactly you want to do? Or do you have a picture/link of what it should look like? — Maik Lowrey, Oct 19 '21 at 19:01
There is `box-shadow` property in you image see at bottom in your snippet a different color border . It is not showing completely as you have used `max-width: 100%` while image has also `width: 100%` and `cover` properties — Rana, Oct 19 '21 at 19:02
I figured it out. I just wanted an inset box-shadow over the top of my image but I'm guessing its not possible with the way I have it set up. — Brady Underwood, Oct 19 '21 at 19:03

score 2 · Accepted Answer · edited Oct 20 '21 at 08:01

You have problem with parent and child nesting. Parent's inside box-shadow is cover by image. Remove z-indexes and add box-shadow on ::after pseudoelement (then no z-indexes are nessesery).

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
}
.img-container::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   box-shadow: 0 0  25px red inset;
}
.img-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="img-container"> 
    <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
 </div>

score 1 · Answer 2 · answered Oct 19 '21 at 19:01

Found a solution that works for my example but was hoping for something more elegant if someone has another idea.

Guessing there is something about a parent not being able to be above its child? CSS sucks.

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-shadow{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    box-shadow: 0 0  25px black inset;
}

<div class="img-container"> 
     <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
     <div class="box-shadow"></div>
</div>

How come my div isn't appearing above my image?

2 Answers2