title: CSS Border-Radius Changes on Hover
body: <p>I can't figure out why the CSS <code>border-radius</code> changes on hover on this div: <a href="http://jsfiddle.net/7pujbpn0/" rel="nofollow">http://jsfiddle.net/7pujbpn0/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      max-width: 100%;
      display: block;
  }
  
  .thumbnail {
   position: absolute;
      top: 50%;
      left: 50%;
      
      width: 320px;
      height: 240px;
      
      -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
      -moz-transform: translate(-50%,-50%); /* Firefox */
      -ms-transform: translate(-50%,-50%); /* IE 9 */
      -o-transform: translate(-50%,-50%); /* Opera */
      transform: translate(-50%,-50%);
       border-radius: 13px;
  }
  
  .image {
      width: 100%;
      height: 100%;    
      overflow: hidden;
      border-radius: 13px;
  }
  
  .image img {
      -webkit-transition: all 1s ease; /* Safari and Chrome */
     -moz-transition: all 1s ease; /* Firefox */
     -o-transition: all 1s ease; /* IE 9 */
     -ms-transition: all 1s ease; /* Opera */
     transition: all 1s ease;
  }
  
  .image:hover img {
      -webkit-transform:scale(1.25); /* Safari and Chrome */
      -moz-transform:scale(1.25); /* Firefox */
      -ms-transform:scale(1.25); /* IE 9 */
      -o-transform:scale(1.25); /* Opera */
       transform:scale(1.25);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="thumbnail"&gt;
      &lt;div class="image"&gt;
          &lt;img  src="http://placehold.it/320x240" alt="Some awesome text"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>border-radius</code> is set to 13px. I'm just trying to achieve a simple zoom effect on the image when you hover over a div.</p>