Zoom in on hover image and keep same size
<p>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?</p>

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

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>  .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);
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="large-3 medium-6 small-12 columns"&gt;
  &lt;h2&gt;Heading 1&lt;/h2&gt;
  &lt;img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" /&gt;
  &lt;p&gt;Paragraph here&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/2gh0juvx/" rel="noreferrer"><strong>JSFiddle</strong></a>  </p>