html - 悬停时扩大圆圈，使背景居中吗？

我正在尝试放大悬停时的圆形元素以显示更多的背景。
我想我成功地做到了，但是背景在转换过程中稍微移动，这就是我现在所拥有的：
http://jsfiddle.net/ANN32/

.foto-icono // The container
{
height: 250px;
text-align: center;
}
.foto-icono > div // The image without padding
{
border-radius: 50%;
width: 200px;
height: 200px;
padding: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.foto-icono > div:hover // More padding and a negative margin so it stays on the same position
{
padding: 20px;
margin-top: -20px;
}

我也尝试了在悬停时改变项目的高度和宽度（而不是填充），但我从背景中随机得到一个奇怪的“颤抖”。
我该怎么做？

最佳答案

相对于填充，我建议调整透明边框。这消除了Chrome的问题。
UPDATED EXAMPLE HERE

.foto-icono > div {
    border:0px solid transparent;
}
.foto-icono > div:hover {
    border:20px solid transparent;
    margin-top:-20px;
}

关于html - 悬停时扩大圆圈，使背景居中吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21436198/