как в css при наведении на картинку плавно менять размер

[greenggc]

подскажите пожалуйста как же поменять  размер при hover размер картинки.

 

Код в html:

 

<ul>
         <li><a href="#"><img src="images/facebook.png" alt="Фэйсбук"></a></li>
         <li><a href="#"><img src="images/twitter.png" alt="Твиттер"></a></li>
         <li><a href="#"><img src="images/vk.png" alt="Вконтакте"></a></li>
         <li><a href="#"><img src="images/mail.png" alt="Майл"></a></li>
         <li><a href="#"><img src="images/drug.png" alt="Другвокруг"></a></li>

</ul>

 

код в css:

 

#social ul li{
    float: left;
    padding-top: 14px;
    padding-right: 8px;
    width: 39px;
    height: 39px;
}

#social ul li a:hover img{
    width: 39px;
    height: 39px;
}

 

[afdw]

http://jsfiddle.net/mwu1f1mc/

[Great Rash]

transition

[greenggc]

transition

Знаю что транзишн, вы мне на примере покажите с кодом, на моем примере.

[greenggc]

http://jsfiddle.net/mwu1f1mc/

Спасибо огромное! )