title: CSS Resize/Zoom-In effect on Image while keeping Dimensions
body: <p>I would like to use the CSS3 <code>scale()</code> transition for a rollover effect, but I'd like to keep the rollover image dimensions the same.  So, the effect is that the image zooms in, but it remains constrained to its existing width and height.</p>
  
  <pre class="lang-css prettyprint-override"><code>img:hover {
      transform:scale(1.5);
      -ms-transform:scale(1.5); /* IE 9 */
      -moz-transform:scale(1.5); /* Firefox */
      -webkit-transform:scale(1.5); /* Safari and Chrome */
      -o-transform:scale(1.5); /* Opera */
  }
  </code></pre>
  
  <p>Here's a basic <strong><a href="http://jsfiddle.net/9R2mx/">fiddle</a></strong> to begin with. </p>
  
  <p>But again, I want the image to keep the width/height.</p>
  
  <p>I'm not married to using the css3 scale. Maybe there's a better way by resizing the element.</p>