在悬停时在 Div 中的 Img 上显示 Box-Shadow

Question

我在 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 class="box" id="tobaking">
        <img src="https://media1.giphy.com/media/13vSD7ajIJwgb6/source.gif">
        <span class="textspan">Straight to Baking!</span></div>

Answer 1

box-shadow 是为父元素设置的，您将无法以任何好的方式在其子元素之上显示父元素。

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

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