Image disappears instead of showing in ie7

Question

I use CSS hover and opacity so that one image changes to another when you hover over it. Putting it on top and setting the opacity so that it disappears when you hover, and the bottom image remains. The code is as follows:

#fade { overflow:hidden; margin:0 auto; } #fade img { position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #fade img.topfade:hover { opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=5)"; filter:alpha(opacity=.5); -moz-opacity:0.5; -khtml-opacity: 0.5; } 

This works fine in ie8, ie9 and firefox, but in ie7 the second image is missing when the first image becomes invisible. Does anyone know how to fix this?

Answer 1

I have made a demo that seems to work for me in Chrome, Firefox, and IE7.

It works in IE8 +, because the -ms-filter rule is correct, however, opacity in IE7 is a filter:alpha(opacity=xx) rule, and the value must be between 0 and 100 . Your current value of .5 makes the swirl image almost completely opaque (and I'm not sure if it's even valid).

quirksmode has a good summary of various CSS opacity rules for IE.

Note. In your example structure, you are missing the <ul> or <ol> to <li> , which I added to the demo.