[Помогите] background-image transition не работает на кнопки формы ...

У меня есть простой форме, как это:

<section class="subscribe" title='Lorem Ipsum'>
<form class="form-wrapper cf" method="post">
<input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." />
<button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
</form>
</section>
Теперь я хочу, чтобы изменить фоновое изображение отображается на кнопку отправки, когда курсор мыши находится над ним. Для этого я попытался с помощью следующей CSS, но не работает:

.form-wrapper #submitBtnForDesktop {
background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
transition: background-image 0.5s;
}

.form-wrapper #submitBtnForDesktop:hover {
background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}

Настоящее время я использую `transition: background-image 0.5s;` в другом месте, чтобы изменить другие фоновые изображения при наведении мыши, но это просто не работает в этом случае.

Кто-нибудь знает, почему?

JSFiddle: http://jsfiddle.net/5FrBv/

 

Не кого-нибудь есть идеи?

 

transition: background 0.5s ease;
-webkit-transition: background 0.5s ease;

 

Спасибо. Я предполагаю, что это для 2 изображения? А как насчет текста? Где я могу вставить этот CSS?

 

.form-wrapper #submitBtnForDesktop {
transition: background 0.5s ease;
-webkit-transition: background 0.5s ease;
}
На счет текста не понял.

 

К сожалению об этом. Я имел в виду мой вопрос из другой темы

Как я могу получить исчезают перехода, вместо этого вертикального скольжения перехода?

Пример (наведении указателя мыши на стрелке изображений):

http://css-tricks.com/examples/FadeImageWithSprite/