title: Image "shaking" on CSS div transition
body: <p>I have a DIV with this CSS on hover:</p>
  
  <pre><code>.card:hover {
    box-shadow: 5px 5px 20px #c4c4c4;
    margin-top: -5px;
    margin-left: -5px;
  }
  </code></pre>
  
  <p>And inside this div, I have an image with this CSS:</p>
  
  <pre><code>.card .avatar {
    border-radius: 100px;
    margin-top: -30px;
    margin-left: 10px;
  }
  </code></pre>
  
  <p>The problem is that the image seems to be "shaking" a bit when the transition occurs. </p>
  
  <p>Here´s the fiddle: <a href="https://jsfiddle.net/zudvv4cv/2/" rel="nofollow noreferrer">https://jsfiddle.net/zudvv4cv/2/</a></p>