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

вопрос

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

<ul class="videolist">
 {custom category="1" template="videonews" aviable="global" navigation="no" from="0" limit="6" fixed="yes" order="date" cache="yes"}
</ul>

в videonews.tpl

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

<li>
<div class="videonews-img" style="background-image: url({image-1});"><a href="{full-link}" rel="nofollow">{title}</a></div>
<a title="{title}" href="{full-link}" class="videoa">{title}</a>
</li>

в 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 браузерах. Подскажите как сделать чтобы одинаково работало во всех браузерах.

Ответа пока нет

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

3 комментария

Юзер

1599

FastFud - 2015-03-2319 июля 2014 13:12 - #32125

Не пробовали искать плагины на jQuery ?

В Firefox - Работает эффект но не работает плавный переход

transition: 1s;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;

Big123 - 2015-03-2319 июля 2014 13:18 - #32127

Цитата: FastFud

Попробовал не работает.
Пробовал вот этот метод но так же почему то не работает

Big123 - 2015-03-2319 июля 2014 14:13 - #32132

Что нет никаких вариантов ?

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

Ответа пока нет

3 комментария

Похожие вопросы

Автообновление DIV блока через Javascript

Как вывести постер в краткой новости?

navigation.tpl отказывается дружить!

Модальные окна в DLE 10.3

Стандартные модальные окна DLE + доп. поля

Как запретить вывод блока на нескольких статических страницах?

Почему не работают табы при ajax full story?

Как вывести просмотры определенной новости ?

Как сделать адаптивный слайдер через custom?