CODEWITHSUNDEEP
htmlcssimage
Whip
Whip

Reputation: 2232

Image on hover overlaps image on the left but not on the right

I'm trying scale up the size of an image on hover. The image is part of a gallery so there are other images on the left and right. The problem is the image on hover overlaps on the left image but not on the right.

I saw this question with the identical problem and tried the fix. It started working on firefox but still no change in Chrome. What's wrong here?

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

You can see it in action here

Upvotes: 0

Views: 830

Answers (1)

BillyNate
BillyNate

Reputation: 908

Add the z-index solution to the .gallery-item element, instead of the images.

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

Upvotes: 1

Related Questions