Jozef Jozef - 18 days ago 6
CSS Question

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

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?

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


And this is the image I have. What changes should I do so the zoomed image stops blocking the padding line? Thanks a lot.

enter image description here

Answer

You can use overflow: hidden property on <div> block that is containing the <img>. And on :hover use transform: scale(x) property.

Have a look at the snippet below:

.grid-box {
  display: flex;
  flex-direction: column;
}

.first-row {
  display: flex;
}

.grid {
  border: 1px solid #fff;
  overflow: hidden;
  transition: all .3s linear;
}

.one, .two {
  width: 100px;
  height: 100px;
}

.three {
  width: 202px;
  height: 100px;
}

.grid:hover img {
  transform: scale(2);
  transition: all .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 this helps!

Comments