我试图在悬停时放大一个圆形元素以显示更多背景。
我以为我设法做到了,但是背景在过渡期间略有移动,这就是我现在拥有的:
.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 上的问题。
.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/