悬停时在 Div 中使 Box-Shadow 出现在 Img 上

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 是为 parent-Element 设置的，您将无法以任何好的方式在其 child-element 之上显示 parent-element。

所以我的方法是为 shadow-effect 使用额外的 div。当您对 .box-element 使用相对位置时，我们可以在这里安全地对 child-element 使用 position: absolute 。你可以在下面的代码片段中找到我的方法，并用评论作为解释。我还添加了一个小示例，使 z-indexes 的 parent-child 问题更加清晰。

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

悬停时在 Div 中使 Box-Shadow 出现在 Img 上

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

css

image

position

z-index