HELP!!! problems CSS & JQuery caption slider in IE
Posted: Tue Oct 23, 2012 3:32 pm
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.
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.