Affecting z-index in CSS on hover/animate-CodePudding

I am trying to create a gallery page where the elements are scaled up while being hovered over. This causes some images to overlap, which means I need the hovered-on element to have an increased 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 >
        <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

CodePudding user response：

Use classes instead of ids and then set the z-index of the .gallery-frame not the .gallery-img so instead of this:

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

Do this:

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

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

Example:

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

      <div >lorem ipsum</div>
    </div>
  </div>

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

      <div >lorem ipsum</div>
    </div>
  </div>

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

      <div >lorem ipsum</div>
    </div>
  </div>
</div>