CSS hover makes other elements move

Question

I want to grow borders on hover. However it does impact all other elements positioning.

The Code (https://jsfiddle.net/s2m3vtbb/):

.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;
}

<div class="carrousel">
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>
</div>

I tried to add some margins, padding, some absolute positioning without success.

Answer 1

You could replace the border with a box-shadow, e.g.

border: 10px solid #D568A8;

should become

box-shadow:  0 0 0 10px #D568A8;

By increasing only this property the computed width/height of the element won't change (because there's no geometry change) so this won't affect the position of the adjacent static images that will be partially overlapped by the box-shadow.

Codepen Demo

Note: in case you didn't want the overlap at the hover state, just increase the margin between elements.