Question

I have this slideshow with a overlay that pops up on hover, you can view it here. Just hover over any pictures below the ‘featured’ section. Works great in FF, Webkit, IE9. I made a separate stylesheet for less than IE9 and in it I have declared width, height, zoom, positioning, used all the filters that work in IE…. and I’m not getting opacity in either IE7 or IE8. The div with class overlay is appended with JQuery, is this a problem? Here is my css:

.overlay {
background-color:#fff;
 filter:alpha(opacity=60);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
 zoom:1;
 width:160px;
 height:20px;
 z-index:50;
 position:absolute;
 bottom:0;
 }

Answer 1

Your fading routine is adding an inline style that results in progid:DXImageTransform.Microsoft.Alpha(Opacity=60) which is overriding your filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65) in your css. It is typical for a fade routine to put an inline style, but you need to make sure that it either ends where you want it (with the 65% opacity) or it goes away after the fade so that the css is used (in Firefox it appears to be fading with an inline and then deleting the inline once done so that the style sheet opacity is picked up).

Edit (added info from comment on fading with jquery): If you are using .fadeIn() then try instead to use .fadeTo(400, 0.65) (see http://api.jquery.com/fadeTo), the 400 is the default duration for .fadeIn(), so you could change that, and the second number is the final opacity setting