HELP!!! problems CSS & JQuery caption slider in IE

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
RossBryan
Forum Newbie
Posts: 19
Joined: Fri Aug 19, 2011 3:03 pm

HELP!!! problems CSS & JQuery caption slider in IE

Post by RossBryan »

Hi 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 in, when hovering over a specific image.

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

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:

<ul>
<div class="featurebox holder">
<li><img src="http://i1207.photobucket.com/albums/bb4 ... uffins.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

.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:

$(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.
Post Reply