Как сделать кроссбраузерное из черно-белого в цветное изображение при наведении

Есть блок вывода новостей с картинками. В mail.tpl подключается так:

 Показать / Скрыть текст

{custom category="1" template="videonews" aviable="global" navigation="no" from="0" limit="6" fixed="yes" order="date" cache="yes"}

в videonews.tpl

 Показать / Скрыть текст



{title}

{title}

в CSS стилях:

 Показать / Скрыть текст

.videonews-img                        {   display: block;   width: 100%;   width: 182px;   height: 102px;   -webkit-filter: grayscale(100%);   -moz-filter: grayscale(100%);   -ms-filter: grayscale(100%);   -o-filter: grayscale(100%);   filter: grayscale(100%);   filter: url(../images/grayscale.svg#greyscale); /* Firefox 4+ */   transition: 1s;   background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; } .videonews-img:hover                { -webkit-filter: grayscale(0%);   -moz-filter: grayscale(0%);   -ms-filter: grayscale(0%);   -o-filter: grayscale(0%);   filter: none;   transition: 1s; } .videonews-img a                    { display: block; width: 182px; height: 102px; text-indent: -9999px; }

Работает это так: по умолчанию изображение черно-белое, а при наведении становится плавно цветным, когда убираешь мышку изображение плавно возвращается в черно-белый цвет. Но проблема вот в чем: все это работает по разному в разных браузерах и нужно сделать все кроссбраузерным. В Firefox - Работает эффект но не работает плавный переход В IE - вообще не работает ни эффект ни переход В Safari - тоже что и в IE, не работает ни эффект ни переход Можно сказать работает только на Webkit браузерах. Подскажите как сделать чтобы одинаково работало во всех браузерах.

Источник: dle-faq.pro