在悬停时展开圆圈,保持背景居中?

时间:2014-01-29 16:00:28

标签: html css

我正在尝试在悬停时放大圆形元素以显示更多背景。

我以为我设法做到了,但是在过渡期间背景稍微移动了,这就是我现在所拥有的:

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

我还尝试在悬停时更改项目的高度和宽度(而不是填充),但我从背景中随机得到一个奇怪的“颤抖”。

我该怎么做?

2 个答案:

答案 0 :(得分:4)

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

UPDATED EXAMPLE HERE

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

答案 1 :(得分:3)

我明白了。从text-align:center课程中删除.foto-icono

这里更新了小提琴:http://jsfiddle.net/ashishanexpert/ANN32/2/