html - 悬停的图像与左侧的图像重叠，但与右侧的图像不重叠

我正在尝试在悬停时放大图像的大小。该图像是图库的一部分，因此左侧和右侧还有其他图像。问题是悬停时的图像在左图像上重叠，但在右图像上不重叠。

我看到具有相同问题的this问题，并尝试解决。它开始在Firefox上运行，但在Chrome中仍然没有变化。怎么了

HTML

<div class="row" id="attractions">
    <div class="container" style="margin-bottom: 20px;">
        <div class="attractions-title">
            <h1 class="text-center text-danger">Gallery</h1>
        </div>
        <div class="gallery">
            <div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.4s">
                <img src="img/attractions/adventure-cove.jpg" alt="Adventure Cove Waterpark">
                <h4 class="text-center">Adventure Cove Waterpark</h4>
            </div>
            <div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.3s">
                <img src="img/attractions/gardens-by-the-bay-5.jpg" alt="Garden By The Bay">
                <h4 class="text-center">Garden By The Bay</h4>
            </div>
            <div class="gallery-item wow fadeIn hidden-xs" data-wow-delay="0.6s">
                <img src="img/attractions/Marina-Bay-Sands-4.jpg" alt="Marina Bay Sands">
              <h4 class="text-center">Marina Bay Sands</h4>
            </div>
        </div>
    </div>
</div>

的CSS

.gallery{
    margin: 20px auto 20px auto;
}

.gallery-item{
    position:relative;
    float:left;
    margin: 15px auto 0px auto;
    width:100%;
    background:rgba(255,255,255,0.95);
    padding: 10px;
    border-radius:5px;
}

.gallery-item img{
    width:100%;
    position: relative;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.gallery-item img:hover, .gallery-item img:active{
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    z-index: 10;
}

您可以在操作中查看它here

最佳答案

将z-index解决方案添加到。gallery-item元素，而不是图像。

.gallery{
    margin: 20px auto 20px auto;
}

.gallery-item{
    position:relative;
    float:left;
    margin: 15px auto 0px auto;
    width:100%;
    background:rgba(255,255,255,0.95);
    padding: 10px;
    border-radius:5px;
    z-index: 9;
}

.gallery-item:hover, .gallery-item:active{
    z-index: 10;
}

.gallery-item img{
    width:100%;
    position: relative;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.gallery-item img:hover, .gallery-item img:active{
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
}

关于html - 悬停的图像与左侧的图像重叠，但与右侧的图像不重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31588411/