fadeIn / fadeOut jquery problem with IE7/8 & png

Question

Hey guys, I am trying to make a magnifying glass background when the use hovers over an image that can be enlarged. This is using a blank span and setting its display to none until it is hovered, and having its background be a semi-transparent png with a magnifying glass in the center.

This is done using fadeIn / fadeOut and works perfectly in all of the other browsers besides IE.

In IE, the background of the image flashes to dark gray before fading to the correct image on hover and hover out.

Here is the example of what I am working on, its the three smaller images in a row:

http://www.brainbuzzmedia.com/themes/amplify/html/index.html

I have read that the solution to this is adding a background color to the element that is fading, but obviously that wouldn't work because I need to use a semi-transparent png as the background. Anyone have any idea what I can do with this?

Answer 1

I don't get the flash to dark gray. What I can think of as a solution is either have another div the same size as the image positioned absolutely behind the image and have that use the png background.

OR

use the opacity property and ms filter for IE.

Answer 2

I had a similar issue.

After the fadein / fadeout try calling:

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

It worked for me when IE 7 & 8 left nasty black smudges where the opacity should have been after doing a fade effect.