Эффекты для ссылки, плавная смена картинки

Плавная смены картинки при наведении мышки.

Подскажите как реализовать.

Для обычной ссылки такой метод подходит.

transition:all 0.3s ease-in-out;

-moz-transition:all 0.3s ease-in-out;

-ms-transition:all 0.3s ease-in-out;

-o-transition:all 0.3s ease-in-out;

-khtml-transition:all 0.3s ease-in-out;

-webkit-transition:all 0.3s ease-in-out;

А как быть с картинкой?

.mainnav li a {

display: inline-block; height: 45px; line-height: 45px; padding: 0px 22px 0px 17px; color: #fff; text-decoration: none; font-size: 14px; 

border-right: 1px dotted #000000;

}

.mainnav li:hover {

border-right: none;

color: #ffffff;

background: url(/media/i/menuhover.gif) center;

height: 60px;

}