影响 hover/animate CSS 中的 z-index

Question

我正在尝试创建一个画廊页面，其中的元素在悬停时会放大。这会导致一些图像重叠，这意味着我需要悬停元素具有增加的 z-index。

#gallery-frame {
  display: inline-block;
  position: absolute;
  z-index: 0;
  filter: drop-shadow(0 0 0.75rem crimson);
}

#gallery-img {
  position: absolute;
  z-index: 1;
  width: 100%;
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#gallery-img img {
  width: 100%;
}

#gallery-frame:hover>#gallery-img {
  transform: scale(1.5);
  z-index: 999;
}

<body>
    <div class="gallery">
        <div id="gallery-frame" style="
            top:  10vw;
            left: 10vw;
            width:20vw;
        ">
            <div id="gallery-img">
                <img src="../img/dreaming.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
            
            
        </div>
        
        <div id="gallery-frame" style="
            top:  10vw;
            left: 50%;
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width:30vw;
        ">
            <div id="gallery-img">
                <img src="../img/bearcanfresh.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  10vw;
            left: 70vw;
            width:20vw;
        ">
        
            <div id="gallery-img">
                <img src="../img/cya.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 10vw;
            width:20vw;
        ">
            <div id="gallery-img">
                <img src="../img/dreaming.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 50%;
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width:30vw;
        ">
            <div id="gallery-img">
                <img src="../img/bearcanfresh.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 70vw;
            width:20vw;
        ">
        
            <div id="gallery-img">
                <img src="../img/cya.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
    </div>
</body>

Here's what's happening currently

This is the desired effect, albeit only accomplished because this image is lower in the HTML, not using z-index

Answer 1

使用类而不是 id，然后设置 .gallery-frame 的 z-index 而不是 .gallery-img 所以不要这样：

.gallery-frame:hover > .gallery-img {
  transform: scale(1.5);
  z-index: 999;
}

这样做：

.gallery-frame:hover {
  z-index: 999;
}

.gallery-frame:hover > .gallery-img {
  transform: scale(1.5);
}

示例：

.gallery-frame {
  display: inline-block;
  position: absolute;
  filter: drop-shadow(0 0 0.75rem crimson);
}

.gallery-img {
  position: absolute;
  width: 100%;
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.gallery-img img {
  width: 100%;
}

.gallery-frame:hover {
  z-index: 999;
}

.gallery-frame:hover>.gallery-img {
  transform: scale(2.5);
}

<div class="gallery">
  <div class="gallery-frame" style="top: 5vw; left: 13vw; width: 20vw">
    <div class="gallery-img">
      <img src="https://www.gravatar.com/avatar/79c9e7af0ce8efbc35e8210afcbad65b?s=64&d=identicon&r=PG" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>

  <div class="gallery-frame" style="
          top: 5vw;
          left: 50%;
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 20vw;
        ">
    <div class="gallery-img">
      <img src="https://i.stack.imgur.com/80JXf.jpg?s=48&g=1" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>

  <div class="gallery-frame" style="top: 5vw; left: 68vw; width: 20vw">
    <div class="gallery-img">
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mC8R1E38jitP-O2nZmVOFK80shuPc_BB7dMmsQV=k-s64" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>
</div>

影响 hover/animate CSS 中的 z-index

Affecting z-index in CSS on hover/animate

css

z-index