Плавная Смена Картинок

[BredoZavR]

Друзья, есть код футера
Картинка ч/б при наведении меняется на цветную, и наоборот

<center>
<table width="800px" style="vertical-align:middle">
<tr>
<td align="center" width="33%">
<img width="150" src="http://lifestyledrift.com/img/memozkito_g.png" onmouseout="this.src='http://lifestyledrift.com/img/memozkito_g.png'" onmouseover="this.src='http://lifestyledrift.com/img/memozkito.png'">
</td>
<td align="center" width="33%">
<img width="150" src="http://lifestyledrift.com/img/amalie_g.png" onmouseout="this.src='http://lifestyledrift.com/img/amalie_g.png'" onmouseover="this.src='http://lifestyledrift.com/img/amalie.png'">
</td>
<td align="center" width="33%">
<img width="150" src="http://lifestyledrift.com/img/KEFFC_g.png" onmouseout="this.src='http://lifestyledrift.com/img/KEFFC_g.png'" onmouseover="this.src='http://lifestyledrift.com/img/KEFFC.png'">
</td>
</tr>
</table>
<!-- <copy> -->Copyright LSD © $YEAR$<!-- </copy> --> <br>
</center>

Но при таком виде смены картинок они меняются моментально. Хотелось бы менять плавно. Уже конец рабочего дня, голова плавится. Не хочется прибегать к каким-то полномасштабным скриптам. Подскажите какой-нибудь легковесный способ, пожалуйста.
Заранее спасибо за помощь.

 

[Bugnet]

Скрипт на jQuery:
DEMO

 

[Valimor]

http://www.xiper.net/manuals/css/propertie...n-property.html гугли. Только работает везде или нет я не в курсе

 

[BredoZavR]

http://www.xiper.net/manuals/css/propertie...n-property.html гугли. Только работает везде или нет я не в курсе

Оп-па, мерси большое!) Не знала об этом свойстве. Но в хроме вроде как не работает

 

[WillSmeet]

а ты используй просто transition и вперед добавляй webkit, o, moz тогда будет работать везде...
Просто в интернете поищи, я уверен найдёшь много статей!

 

[BredoZavR]

а ты используй просто transition и вперед добавляй webkit, o, moz тогда будет работать везде.

Я знаю об этом, в примере на том сайте просто не работало даже с установленными значениями, но это лишь в примере