Html 在悬停时展开圆圈，使背景居中？

我试图放大悬停上的圆形元素，以显示更多的背景

我想我成功地做到了，但是在过渡期间背景会稍微移动，这就是我现在所拥有的：

我还试着改变悬停时的项目高度和宽度（而不是填充），但我随机从背景中得到一个奇怪的“抖动”

---

如何才能做到这一点？

与填充相反，我建议调整透明边框。这消除了Chrome上的问题

---

与填充相反，我建议调整透明边框。这消除了Chrome上的问题

---

我明白了。从

.foto icono

类中删除

text align:center

---

这是最新的小提琴：

我拿到了。从

.foto icono

类中删除

text align:center

---

这里是最新的fiddle:

对于firefox，它工作得很好-Chrome已经坏了。但是，如果你将fiddle的大小调整到足以强制垂直滚动条，它就可以正常工作。对我来说，它在Chrome中工作得很好（没有滚动条）.成功设置背景附件有限：已修复，但没有时间继续玩：（只有当水平方向上有偶数个像素时，它才显得平滑。看看吧。对于firefox来说，它工作得很好——Chrome被破坏了。但问题是，如果你将小提琴的大小调整到足以强制垂直滚动条，它就可以正常工作。对我来说，它在Chrome中工作得很好（没有滚动条）.设置背景附件的成功有限：已修复，但没有时间再播放：（只有在水平方向上有偶数个像素时，它才显得平滑。请检查。我认为这是一个好主意，不过我随机得到了一点“抖动”我在回答的最后提到了。我仍然在小提琴上看到它，但更明显的是：@Liso22你想要类似的东西吗？这是一个完全不同的方法。我想展示更多的图像。你的方法是我能得到的最好的方法，但尽管它应该可以工作，但在某些浏览器上仍然有问题，有时是随机的。我认为这是一个g真是个好主意，不管我是多么随意地得到一点“震动”我在回答的最后提到了。我仍然在小提琴上看到它，但更明显的是：@Liso22你想要类似的东西吗？这是一种完全不同的方法。我想展示更多的图像。你的方法是我能得到的最好的方法，但尽管它应该可以工作，但在某些浏览器上仍然有问题，有时是随机的。

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

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