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

i'm trying scale size of image on hover. image part of gallery there other images on left , right. problem image on hover overlaps on left image not on right.

i saw this question identical problem , tried fix. started working on firefox 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 bay">                 <h4 class="text-center">garden 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: 0.5s ease;     -webkit-transition: 0.5s ease;     -ms-transition: 0.5s ease;     -o-transition: 0.5s ease;     -moz-transition: 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 in action here

add z-index solution .gallery-item element, instead of 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: 0.5s ease;     -webkit-transition: 0.5s ease;     -ms-transition: 0.5s ease;     -o-transition: 0.5s ease;     -moz-transition: 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); }