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

Question

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

我看到了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

Answer 1

将 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);
}