css - Bootstrap - I need to zoom image on the mouse hover, but keep its original size -

i trying create bootstrap grid images padding, zoomed in on hover. problem after set overflow "hidden", keep blocking padding line set - padding set in same element , reason override it. example, when hover on left image, grows bit , blocks vertical white line in middle. how can force css respect padding?

my html

   <div class="row" style="height:100%">   <div class="col-md-6 img-hover" style="padding-right:3px;height:100%;overflow:hidden;">          <img class="img-responsive" src="images/image.jpg")" style="overflow: hidden" />          </div>          <div class="col-md-6" style="overflow:hidden;height:100%; padding-right: 3px;">              <div class="row">                  <img class="img-responsive" src="/images/image2.jpg")" />              </div>              <div class="row" style="padding-top:3px;height:100%">                  <div class="col-md-6" style="padding-left: 0px;  padding-right: 3px">                      <img class="img-responsive" src="/images/image3.jpg")" />                  </div>                  <div class="col-md-6" style="padding-left: 0px;  padding-right: 3px">                      <img class="img-responsive" src="/images/image3.jpg")" />                  </div>              </div>          </div>      </div>

my css:

.img-hover img {     -webkit-transition: .3s ease; /* safari , chrome */     -moz-transition: .3s ease; /* firefox */     -o-transition: .3s ease; /* ie 9 */     -ms-transition: .3s ease; /* opera */     transition: .3s ease;     overflow:hidden; }  .img-hover img:hover {     -webkit-backface-visibility: hidden;     backface-visibility: hidden;     -webkit-transform:translatez(0) scale(1.20); /* safari , chrome */     -moz-transform:scale(1.10); /* firefox */     -ms-transform:scale(1.10); /* ie 9 */     -o-transform:translatz(0) scale(1.10); /* opera */     transform:translatz(0) scale(1.10); } 

and image have. changes should zoomed image stops blocking padding line? lot.

you can use overflow: hidden property on <div> block containing <img>. , on :hover use transform: scale(x) property.

have @ snippet below:

.grid-box {    display: flex;    flex-direction: column;  }    .first-row {    display: flex;  }    .grid {    border: 1px solid #fff;    overflow: hidden;    transition: .3s linear;  }    .one, .two {    width: 100px;    height: 100px;  }    .three {    width: 202px;    height: 100px;  }    .grid:hover img {    transform: scale(2);    transition: .2s linear;  }

<div class="grid-box">    <div class="first-row">      <div class="grid one">        <img src="http://placehold.it/100x100" alt="" />      </div>      <div class="grid two">        <img src="http://placehold.it/100x100" alt="" />      </div>    </div>    <div class="grid three">      <img src="http://placehold.it/202x100" alt="" />    </div>  </div>

hope helps!