Перекатывание изображений

[Temiks]

Здравствуйте.

Есть задача: Портфолио работ(картинки) черно-белого цвета. При наведение - картинка становится цветной.

Нашел статью на хбуке http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Но данный пример не подходит, т.к картинки все будут разные, а к каждой применять класс и прописывать ей стили не хочется.

Нашел решение на JS: http://www.sdws.ru/topic.php?t=3&id=2#

Как бы тоже не хочется его применять: 1. Нужна поддержка JS. 2. Нужно создавать две картинки(Желательно спрайтом). 3. Опять же, если правильно понимаю, нужно лезть в JS файл и задавать пути.

Собственно вопрос: Можно ли как-то с помощью CSS решить эту проблему?

ps. рылся в гугле, в итоге нашел кучу коперайтеров статьи хбука.

Edited August 13, 2012 by Temiks

[mrnobody]

А какая поддержка браузеров? А то можно через CSS-фильтры сделать.

[Temiks]

А какая поддержка браузеров? А то можно через CSS-фильтры сделать.

Желательно ие8+

[SelenIT]

С IE как раз проблем меньше всего, filter:gray; работает с IE4. А вот нормальные браузеры через CSS научились только недавно (и то не все). Можно с SVG-фильтрами пошаманить, но непонятно, что делать с Оперой. Имхо, на сегодня самый практичный вариант — на JS через Canvas (а для древних IE — filter:gray).

[Temiks]

С IE как раз проблем меньше всего, filter:gray; работает с IE4. А вот нормальные браузеры через CSS научились только недавно (и то не все). Можно с SVG-фильтрами пошаманить, но непонятно, что делать с Оперой. Имхо, на сегодня самый практичный вариант — на JS через Canvas (а для древних IE — filter:gray).

Спасибо большое.

Без JS нашел два способа решения. (Может кому-нить пригодится)

1. Прописывать в html div-y(или другому элементу) background-images, а в css уже задавать его позицию при наведении. (получается используем только один класс)

2. Используем position: absolute;

Получается как-то так:

http://jsfiddle.net/pjcxu/4/

Edited August 14, 2012 by Temiks