title: Scale rounded image on hover
body: <p>I am attempting to have a 'circular' image with a border, when the user hovers over the image the image inside is the border is scaled. Why does it appear to be glitching? can someone tell me whats going on?</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="wrapper"&gt;
      &lt;div class="portfolio-item"&gt;
          &lt;div class="portfolio-item-preview"&gt;
              &lt;img src="https://i.imgur.com/aLJnBtV.jpg" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.wrapper {
      background-color: #FFF;
      border: 1px solid #EDEDED;
      padding: 8px;
      width:200px;
      border-radius:50%;
  }
  .portfolio-item {
      overflow: hidden;
      border-radius:50%;
  }
  .portfolio-item-preview {
      position: relative;
  }
  img {
      max-width: 100%;
      height: auto;
  }
  .portfolio-item:hover .portfolio-item-preview {
      -webkit-transform: scale(1.1);
      -webkit-transition: all 0.125s ease-in-out 0s;
      -moz-transition: all 0.125s ease-in-out 0s;
      -ms-transition: all 0.125s ease-in-out 0s;
      -o-transition: all 0.125s ease-in-out 0s;
      transition: all 0.125s ease-in-out 0s;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/do5q87hq/2/" rel="nofollow">JSFiddle</a></p>