中心對齊幾個淡入淡出圖像

我想中間對齊小部件內的幾個淡入淡出圖標。到目前爲止，我只設法將它們向左或向右對齊。如果我嘗試做其他任何事情，它只是垂直堆疊每個圖標。這裏的CSS：中心對齊幾個淡入淡出圖像

.icon { 
    float:left; 
    position:relative; 
    height:32px; 
    width:32px; 
    padding:4px; 
} 

.icon img { 
    position:absolute; 
    left:0; 
    opacity: 1; 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -o-transition: opacity .3s ease-in-out; 
    -ms-transition: opacity .3s ease-in-out;  
    transition: opacity .3s ease-in-out; 
} 

.icon img.top:hover { 
    opacity:0; 
}

而對於一個圖標HTML：

<div class="icon"> 
    <img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter-1.png" class="bottom" /> 
    <img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter.png" class="top" /> 
</div>

我試圖用五個圖標做到這一點，但不能弄明白。似乎是交叉淡化效果疊加圖像的問題。

這是JFiddle。

來源

2014-10-03 Manda