Hot To Make li:hover Not Move Siblings - html

Question

I'm trying to enlarge my list-item borders when hovered, but when I do, it shifts the other icons down.
My thought was to use position: absolute on the parent and position: relative on the li or image, but the other list-items/images are still being affected.
jsFiddle: http://jsfiddle.net/2e07Lv9y/2/
HTML:
<div class="container">
<ul class="social">
<li><img src="http://placehold.it/36x36"/></li>
<li><img src="http://placehold.it/36x36"/></li>
<li><img src="http://placehold.it/36x36"/></li>
<li><img src="http://placehold.it/36x36"/></li>
<li><img src="http://placehold.it/36x36"/></li>
</ul>
</div>
CSS:
.container {
background-color: rgb(54, 129, 245);
height: 75px;
}
.social {
width: 50%;
margin: 3%;
position: absolute;
right: 0;
}
li {
list-style: none;
display: inline-block;
margin: 0 1%;
}
img {
border: 2px white solid;
}
li:hover {
cursor: pointer;
border: 5px white solid;
position: relative;
}
What am I missing?

Answer 1

You could use outline instead of border. Outlinke behaves similar to border, but it is not part of the elements dimensions.
see: http://www.w3schools.com/css/css_outline.asp
li:hover {
cursor: pointer;
outline: 5px white solid;
position: relative;
}
Fiddle: http://jsfiddle.net/2e07Lv9y/7/

Answer 2

You are adding a border 5px wide when you hover.
You need to add a border 5px wide when not hover so that they are only changing the background colour. Something along the lines of:
li {
list-style: none;
display: inline-block;
margin: 0 1%;
border:5px solid rgb(54, 129, 245);
}
Updated DEMO
You may need to adjust the height, position, of the li

Answer 3

Problem is that on :hover li that display inline block, have more width including border. if you won't shifts down you need change .social width to more than 50% or place elements via text-align: right.

Answer 4

Add
padding: 5px;
to the normal li
and
padding: 0px;
to the li:hover