title: Zoom in on hover image and keep same size
body: <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>