Как задать кроссбраузерно одновременно opacity и grayscale, особенно интересно как это сделать в IE 8 и ниже?

Question

[kni9ht-ch]

img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
opacity: 0.5;
}

img:hover {
-webkit-filter: grayscale(0%);
-khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity:100;
}

Как должно работать: картинка полупрозрачна черно-белая, а когда наводите меняется на обычную, без прозрачности и цветная. Проблема в том что в IE можно одновременно задать или прозрачность или grayscale, может кто что посоветует, включаю альтернативу на JS, спасибо!

Answer 1

[Lisonok]

Opacity накладывается и на все дочерние элементы
Сделайте примерно так

<div class="wrap">
<img src="http://site.ru/img.jpg">
</div>

wrap - задайте прозрачность, а img - grayscale

Answer 2

[kni9ht-ch]

спасибо, действительно хороший способ, правда в Опере 12 не работает, может кто подскажет костыль?