Zoom in on hover image and keep same size

Question

I am trying to have the hover zoom feature for my website, however, I have seen other examples and my code seems to be the same, however the dimensions of the image doesn't stay the same. Any ideas what could be the problem?

.imgBox {
  display: inline-block;
  overflow: hidden !important;
  transition: .3s ease-in-out
}

  .imgBox {
    display: inline-block;
    overflow: hidden !important;
    transition: .3s ease-in-out
  }
  .imgBox:hover {
    opacity: 0.6;
    filter: alpha(opacity=30);
    transform: scale(1.3);
  }

<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" />
  <p>Paragraph here</p>
</div>

JSFiddle

Answer 1

It appears that you are trying to scale the image which is fine but to restrict what is actually seen requires that the image be scaled within a container.

Then when the image is scaled, the container will hide anything that would normally "spill out" if you didn't hide the overlflow.

So, like this:

.imgBox { /* now a container for the image */
    display: inline-block; /* shrink wrap to image */
    overflow: hidden; /* hide the excess */
  }
  .imgBox img {
    display: block; /* no whitespace */
    transition: .3s ease-in-out;
  }
  .imgBox:hover img {
    transform: scale(1.3);
  }

<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <div class="imgBox">
    <img src="http://lorempixel.com/image_output/food-q-c-300-200-9.jpg" />
  </div>
  <p>Paragraph here</p>
</div>