JQuery - fadeIn () and fadeOut () in a PNG image. Border Solid (black) in IE8 ...?

Question

I run fadeIn () and fadeOut () in a div block where there is a PNG image, with translucent means (with shadow).

See http://jsfiddle.net/k3KUj/8/embedded/

In IE 8, hard edges appear when fadeIn () and fadeOut () are run, but it soon disappears. In Firefox, this is normal.

It is logical to apply the background color in PNG (for example, with the link above, the background color should be light gray), it works.

But I do not want to put the background color in PNG. I am trying to get black borders that do not appear in IE 8, even if you have PNG image transparency.

Looking at the answer in the forum , I tried:

-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # 00FFFFFF, endColorstr = # 00FFFFFF)"; / * IE8 /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 00FFFFFF, endColorstr = # 00FFFFFF); / IE6 and 7 * /
zoom: 1;

and see in jquery IE Fadein and Fadeout Opacity

$ ('# bloc'). css ('filter', 'alpha (opacity = 40)');

and see in fadeIn / fadeOut the problem with jQuery with IE7 / 8 and png

$ ("# bloc"). css ('filter', 'none');

But it doesn’t work. Any new idea, without using any color on the background of the image is transparent?

Thanks, Vinicius.

Answer 1

Define a solid background color for your image:

    .container img {
         background-color: white;
    }

css background-image src:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

:

: . .