最優化的方式來設置懸停效果

Question

我得到了橫向菜單與例如相似圖片：

<div class="menu"> 
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a> 
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a> 
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a> 
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a> 
</div> 

小提琴here

什麼樣的懸停效果重量輕變型我可以使用，使圖像更明顯懸停？

Answer 1

，你可以嘗試這個，這是非常簡單，重量輕，沒有劇本，純CSS和看起來不錯：

.menu img{ 
    border: 5px solid #ccc; 
    float: left; 
    margin: 15px; 
    -webkit-transition: margin 0.5s ease-out; 
    -moz-transition: margin 0.5s ease-out; 
    -o-transition: margin 0.5s ease-out; 
} 

.menu img:hover { 
    margin-top: 2px; 
} 

example