I'm attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide, when hovering over a specific image (image with link).

So far I've got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers, but I can't seem to get the caption integrated to function correctly for IE8, 9 or any of the previous IE versions. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

I have a feeling that the problem lays within the CSS but im not quite sure.

Heres a JSFiddle example of how it works correctly in the modern browsers:

http://jsfiddle.net/RossB/THS2J/

Can Anybody please shed some light on on any tricks i'm missing?

Here is section of my HTML code:

HTML Code:
<ul>
<div class="featurebox holder">
<li><img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" alt="events" /></li>
<div class="cover featuretext">
<h3 class="date">Day 24th Month</h3>
<p>Lorem ipsum dolor sit amet,
consectetur asipisicing elit, sed do
eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p>
</div>
</div>
</ul>​
Here is the CSS

HTML Code:
.featurebox h3{ 
color:#ffffff; 
margin-top:0px; 
margin-bottom:0px; 
padding-left:5px; 
font:11pt; 
font-weight: bold; 
} 

.featurebox{ 
color:#ffffff; 
width: 185px; 
height: 118px; 
float:left; 
/*border: solid 2px #8399AF;*/ 
overflow: hidden; 
position: relative; 
} 

/*caption para text*/ 
.featurebox p{ 
margin-top:0px; 
padding-left: 5px; 
padding-right:5px; 
} 

/*caption slider */ 
.featuretext{ 
top:99px; 
float: left; 
position: absolute; 
background: #000; 
height: 100px; 
width: 100%; 
opacity: .8; 

/* For IE 5-7 */ 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ 
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } 

.holder .featuretext { 
top: 220; left: 0; 
} 

.featurebox p a { 
float: right; 
color:#FFFF00; 
}​

And finally is the JQuery:

Code:
$(document).ready(function(){ 
//Caption Sliding (Partially Hidden to Visible)
$('.featurebox.holder').hover(function(){
$(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
});
});

Any help would be much appreciated. Thanks guys.