title: Bootstrap - I need to zoom image on the mouse hover, but keep its original size
body: <p>I am trying to create a bootstrap grid with images with some padding, which are zoomed in on hover. The problem is that even after I set overflow to "hidden", they keep blocking the padding line I set - padding is set in the same element and for some reason they override it. For example, when I hover over the left image, it grows a bit and blocks the vertical white line in the middle. How can I force the css to respect the padding?</p>
  
  <p>My html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class="row" style="height:100%"&gt;
   &lt;div class="col-md-6 img-hover" style="padding-right:3px;height:100%;overflow:hidden;"&gt;
          &lt;img class="img-responsive" src="Images/image.jpg")" style="overflow: hidden" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6" style="overflow:hidden;height:100%; padding-right: 3px;"&gt;
              &lt;div class="row"&gt;
                  &lt;img class="img-responsive" src="/Images/image2.jpg")" /&gt;
              &lt;/div&gt;
              &lt;div class="row" style="padding-top:3px;height:100%"&gt;
                  &lt;div class="col-md-6" style="padding-left: 0px;  padding-right: 3px"&gt;
                      &lt;img class="img-responsive" src="/Images/image3.jpg")" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6" style="padding-left: 0px;  padding-right: 3px"&gt;
                      &lt;img class="img-responsive" src="/Images/image3.jpg")" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My css:</p>
  
  <pre><code>.img-hover img {
      -webkit-transition: all .3s ease; /* Safari and Chrome */
      -moz-transition: all .3s ease; /* Firefox */
      -o-transition: all .3s ease; /* IE 9 */
      -ms-transition: all .3s ease; /* Opera */
      transition: all .3s ease;
      overflow:hidden;
  }
  
  .img-hover img:hover {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform:translateZ(0) scale(1.20); /* Safari and 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);
  }
  </code></pre>
  
  <p>And this is the image I have. What changes should I do so the zoomed image stops blocking the padding line? Thanks a lot.</p>
  
  <p><a href="https://i.stack.imgur.com/lKTIu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKTIu.jpg" alt="enter image description here"></a></p>