title: CSS hover makes other elements move
body: <p>I want to grow borders on hover. However it does impact all other elements positioning.</p>
  
  <p><strong>The Code (<a href="https://jsfiddle.net/s2m3vtbb/" rel="nofollow">https://jsfiddle.net/s2m3vtbb/</a>):</strong></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>.nicePeopleItem  {
    display:inline-block;
  }
  .nicePeopleItem img{
    border-radius:48px;
    border: 4px solid #D568A8;
    padding: 2px; 
    transition-duration:0.3s; 
    cursor:pointer;
  }
  .nicePeopleItem img:hover{
    border: 10px solid #D568A8;
    transition-duration:0.3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carrousel"&gt;
    &lt;div class="nicePeopleItem"&gt;
      &lt;img src="http://placehold.it/48x48"&gt;
    &lt;/div&gt;  
    &lt;div class="nicePeopleItem"&gt;
      &lt;img src="http://placehold.it/48x48"&gt;
    &lt;/div&gt;  
    &lt;div class="nicePeopleItem"&gt;
      &lt;img src="http://placehold.it/48x48"&gt;
    &lt;/div&gt;  
    &lt;div class="nicePeopleItem"&gt;
      &lt;img src="http://placehold.it/48x48"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to add some margins, padding, some absolute positioning without success.</p>