[CSS] wykorzystanie filtrów Opcje

[lukash82]

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 
.grey{
    filter				: url(filter.svg#grayscale);
    filter				: gray;
    -webkit-filter		: grayscale(1);
	-webkit-transition	: 0.3s all ease;
    -o-transition		: 0.3s all ease;
    -moz-transition		: 0.3s all ease;
    transition			: 0.3s all ease;}
.grey:hover{
    filter				:none;
    -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 
-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, Ł