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

Question

I have an img in a div. On hover, an inset box-shadow should appear over the image, as well as the text in the div enlargening. The text resizes perfectly, but the box-shadow does not appear. It shows when the img is removed, so it must appear only below the img. How do I get it to come out on top?

            .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;
                z-index:1;
            }
            .box:hover{
                box-shadow:0px -20px 40px rgba(35, 203, 167, 1) inset;
                font-size:40px;
            }
            #tobaking img {
                margin-top:-40px;
                z-index:3;
            }

<div class="box" id="tobaking">
        <img src="https://media1.giphy.com/media/13vSD7ajIJwgb6/source.gif">
        <span class="textspan">Straight to Baking!</span></div>

Answer 1

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>