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.
HELP!!! problems CSS & JQuery caption slider in IE
Moderator: General Moderators