展開圓盤保持背景居中？

我想放大懸停的圓形元素以顯示更多的背景。展開圓盤保持背景居中？

我以爲我設法做到這一點，不過背景的過渡過程中輕微移動，這是我現在有：

.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

展開圓盤保持背景居中？

回答

相關問題