展开圆盘保持背景居中？

我想放大悬停的圆形元素以显示更多的背景。展开圆盘保持背景居中？

我以为我设法做到这一点，不过背景的过渡过程中轻微移动，这是我现在有：

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

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

我该怎么做？

来源

2014-01-29 lisovaccaro

用Firefox，它工作得很好 - 铬虽然捣毁。 – drahnr

尽管如此，如果您将小提琴的大小调整为足以强制垂直滚动条，它的工作原理应该如何。 – George

对我来说，它在Chrome中运行正常（没有滚动条）。 – j08691

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

UPDATED EXAMPLE HERE

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

来源

2014-01-29 16:04:27

我认为这是一个好主意，不过随机我得到了我在答案末尾提到的那个“摇动”，我仍然在小提琴上看到它，但它更多这里显然：http://pranalog.com/test/ – lisovaccaro

@ Liso22你想要的东西像[这个]（http://jsfiddle.net/G582s/）？这是一个完全不同的方法 –

我想透露更多的你的方法是我能得到的最好的方法，但是它应该可以工作，但它在某些浏览器上仍然有问题，有时是随机的。 – lisovaccaro

我知道了。从您的.foto-icono课程中删除text-align:center。

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

来源

2014-01-29 16:08:53

展开圆盘保持背景居中？

回答

相关问题