How to fix "transparent PNG24 + opacity" display issue in IE8?

Question

css

I recently discovered this problem: when setting opacity < 1 for a transparent image, it does not display correctly in my beloved IE8. Does anyone know the reason for this and how it can be fixed?
I attach a screenshot and styles to the image

element{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    -khtml-opacity: 0.4;
    -moz-opacity: 0.4;
    opacity: 0.4;
}
element:hover{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: inherit;	
}

The page itself can be seen here: tooq.3eeweb.com/test2

Answer 1

Did you google? The problem is old
https://www.google.ru/search?q=ie8+png+bug&start=0...
Example, check with ie8
codepen.io/iiil/pen/avphD
True, you will have to put it in a separate css file, but once support ie8—you should have it anyway :)

Answer 2

Try to run images through pngquant it had some parameters for "better" transparency in IE