Css 使方框阴影以悬停时的Div显示在Img上

我在div中有一个img。悬停时，图像上会出现一个插入框阴影，div中的文本也会放大。文本可以完全调整大小，但不会显示框阴影。它显示img被移除的时间，因此它必须仅显示在img下方。我怎样才能让它脱颖而出

            .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来实现阴影效果。当您对.box元素使用相对位置时，我们可以安全地对子元素使用position:absolute。 您可以在下面的代码片段中找到我的方法，并将注释作为解释。我还添加了一个小示例，以使z索引的父子问题更加清楚

.box{
宽度：340px；
高度：200px；
边框：实心4pxRGBA（542151831）；
利润率：10px；
位置：相对位置；
字体大小：30px；
文本对齐：底部对齐；
过渡：字体0.1s轻松；
}
/*我不确定是否有更有效的方法，但像这样，我们需要两个规则的悬停效果*/
.box:悬停。阴影{
盒影：0px-20px40pxRGBA（352031671）插页；
}
.box:悬停{
字体大小：40px；
}
#吸烟{
利润上限：-40px
}
.影子{
/*绝对位置有效，因为.box元素具有相对位置*/
位置：绝对位置；
/*与图像的位置和大小相同*/
利润上限：-40px；
宽度：350px；
高度：300px；
/*如果您希望图像可单击等，则需要禁用位于顶部的元素上的指针事件*/
指针事件：无；
}
/*例如css，不管我们把z索引放得多么极端，子元素都在前面*/
.家长{
边缘顶部：100px；
宽度：200px；
高度：200px；
背景：红色；
z指数：50；
}
.孩子{
宽度：200px；
高度：200px；
背景：黄色；
z指数：-50；
}

直接去烤吧！

框阴影是为父元素设置的，您将无法以任何良好的方式在其子元素的顶部显示父元素

所以我的方法是使用一个额外的div来实现阴影效果。当您对.box元素使用相对位置时，我们可以安全地对子元素使用position:absolute。 您可以在下面的代码片段中找到我的方法，并将注释作为解释。我还添加了一个小示例，以使z索引的父子问题更加清楚

.box{
宽度：340px；
高度：200px；
边框：实心4pxRGBA（542151831）；
利润率：10px；
位置：相对位置；
字体大小：30px；
文本对齐：底部对齐；
过渡：字体0.1s轻松；
}
/*我不确定是否有更有效的方法，但像这样，我们需要两个规则的悬停效果*/
.box:悬停。阴影{
盒影：0px-20px40pxRGBA（352031671）插页；
}
.box:悬停{
字体大小：40px；
}
#吸烟{
利润上限：-40px
}
.影子{
/*绝对位置有效，因为.box元素具有相对位置*/
位置：绝对位置；
/*与图像的位置和大小相同*/
利润上限：-40px；
宽度：350px；
高度：300px；
/*如果您希望图像可单击等，则需要禁用位于顶部的元素上的指针事件*/
指针事件：无；
}
/*例如css，不管我们把z索引放得多么极端，子元素都在前面*/
.家长{
边缘顶部：100px；
宽度：200px；
高度：200px；
背景：红色；
z指数：50；
}
.孩子{
宽度：200px；
高度：200px；
背景：黄色；
z指数：-50；
}

直接去烤吧！

注意如果框中有多个图像并且想要这样做，最好将img和阴影放在固定位置，如top:0 right:0等。否则您的布局可能会有点疯狂注意如果框中有多个图像并且想要这样做，最好将img和阴影放在固定位置位置如顶部：0右侧：0等，或者你的布局可能会有点疯狂

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