Maintain list dimensions with CSS Transition - css

Question

I'm trying to create an effect with list items in an unordered list.
Basically, anytime one hovers over the list, the size adjusts 2px in padding. While this properly it is also effecting the overall dimensions of the list item, thus pushing other list elements to the right and pushing the div beaneath down 2px. Anyone know of a way to remedy this issue?
All I want the list item to do during a hover is to increase padding by 2px without effecting any other elements around it.
You can find the code on jsfiddle here as well as below:
HTML
<div id="info">
<ul class="projects">
<li class="site wmhr">$
<p>What's My Hourly Rate</p>
</li>
<li class="site proud">P
<p>PROUD</p>
</li>
<li class="site mdy">M
<p>Manda Dougherty Yoga</p>
</li>
<li class="site rr">R
<p>Responsive Resume</p>
</li>
<li class="site dp">D
<p>designpairs (in progress)</p>
</li>
</ul>
</div>
CSS
.projects {
margin: 0;
padding: 0 0 50px 0;
}
.projects li {
display: inline-block;
list-style: none;
width: 70px;
height: 70px;
margin: 50px 20px 20px 0;
border: 4px solid #555;
border-radius: 50%;
font-size: 2em;
text-align: center;
line-height: 70px;
background: #414141;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.projects p {
font-size: .850rem;
line-height: 1.500em;
}
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
}
.projects li a {
font-family:'Montserrat', sans-serif;
color: #fff;
text-decoration: none;
}
.wmhr:hover {
background: #66CC6E;
border: 4px solid #57ac5e;
}
.proud:hover {
background: #5882c2;
border: 4px solid #4b6da2;
}
.mdy:hover {
background: #fec601;
border: 4px solid #ddad03;
}
.rr:hover {
background: #797b96;
border: 4px solid #606176;
}
.dp:hover {
background: #475161;
border: 4px solid #38404d;
}

Answer 1

If you don't want the item to move, then you have to counteract the padding with a reduction in some other dimension or change the layout structure to not use inline layout.
Here's a version of your jsFiddle that uses a reduction in the margin to counteract the increase in the padding. The hovered item gets larger, but the other items don't move.
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
margin: 48px 18px 18px 0;
}
Note, I also changed the default left margin to be 2px so I could reduce it to 0 here as I hate using negative margins (they sometimes cause objects to overlap which can introduce unexpected behaviors).
http://jsfiddle.net/jfriend00/6jjcg/

Answer 2

I would use a CSS transform property rather than adding padding and adjusting around it.
.projects li:hover {
transform: scale3d(1.2,1.2,1);
}
Using scale3d rather than simply scale because scale3d uses hardware acceleration. You'll also want to add -webkit and -moz prefixes for better compatibility.
jsFiddle example