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

悬停图像在左侧重叠图像，但在右侧不重叠

1 个答案: