Witam,

Potrzebuję uzyskać efekt kolorowania fotki. Tzn. bazowo jest ona kolorowa, ale w css domyślnie zamieniana na skalę szarości. W CSS3 sprawa teoretycznie prosta ale jednak cos mi tam nie bardzo działa.

[CSS] pobierz, plaintext 
  1. .grey{
  2.     filter				: url(filter.svg#grayscale);
  3.     filter				: gray;
  4.     -webkit-filter		: grayscale(1);
  5. 	-webkit-transition	: 0.3s all ease;
  6.     -o-transition		: 0.3s all ease;
  7.     -moz-transition		: 0.3s all ease;
  8.     transition			: 0.3s all ease;}
  9. .grey:hover{
  10.     filter				:none;
  11.     -webkit-filter		: grayscale(0);}
[CSS] pobierz, plaintext


Chciałem do tego dodać nieco przezroczystości ponieważ tworzone obrazki sa dosyć ciemne w skali szarości. Modyfikuję więc 3 linijkę kodu do:

[CSS] pobierz, plaintext 
  1. -webkit-filter		: grayscale(1) opacity(0.2);
[CSS] pobierz, plaintext


I wtedy ten odstęp czasowy znika. Tzn. odbarwienie następuje bardzo gwałtownie, a nie tak płynnie. Co robię nie tak? W CSS3 trochę raczkuję więc pewnie to jakiś drobny błąd...?

PS. Teoretycznie powinno to zadziałać pod IE ale jednak nie działa. O co kaman?

Proszę o jakąś podpowiedź.

Pozdrawiam, Ł