Opacity is not working on images in IE8

Question

Opacity is not being inherited by the images in a DIV with opacity in IE8 and I'm not sure why. One is an image via HTML, and the other images are set as a background in CSS (to achieve a roll over effect). It works properly in IE7, IE9, Chrome, Firefox and Safari.

My code is in this fiddle: http://jsfiddle.net/46AKc/5/

If I apply

opacity: .75; /* Standards Compliant Browsers */
filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);

to #hover-prod1, the rollover's opacity changes but it does not seamlessly blend into .slide-out the way it does in other browsers, so I don't think that is the right solution.

I have tried the solutions in the following posts with no luck: Opacity CSS not working in IE8
Opacity in IE8 works on <p> but not on <a>
Opacity not working on img in IE8

Answer 1

That's because

.hover-products{
   position:relative;
}

Just remove it.

See it here: http://jsfiddle.net/46AKc/7/

Answer 2

Yes, change these two lines:

.slide-out a:hover{color:#F36F21;}

.hover-products{position: relative; width:338px; margin:20px 0 50px 15px; height: 90px;}

to this:

.slide-out a:hover{color:#F36F21; position: relative;}

.hover-products{width:338px; margin:20px 0 50px 15px; height: 90px;}