Really struggling to understand this problem, any ideas are welcome
I have a carousel of images and all have rollovers that appear in every browser but IE, (testing in IE8 at the mo)
Live site http://www.warface.co.uk/clients/warface.co.uk/testv2 click top red box to reveal
To add to the confusion rollover appears when an image isnt present
HTML
<div class="anyClass">
<ul><?php query_posts('category_name=project'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><div class="project-thumb caption">
<div class="cover boxcaption">
<div class="content">
<h2><?php the_title() ?></h2>
<a class="view-project" href="<?php the_permalink() ?>">View Project</a>
</div><!--content END -->
</div><!-- cover boxcaption END -->
</div><!-- project-thumb caption END -->
<?php $description = get_post_meta($post->ID, "project-thumb", $single = true);
if($description !== '') { echo $description; } ?></li>
<?php endwhile; endif;
wp_reset_query(); ?>
</ul></div><!-- anyClass END -->
CSS
.project-thumb { /* -- This is the hit area -- */
overflow: hidden;
width:499px;
height:337px;
display:block;
top:0px;
right:0px;
position: absolute;
}
.project-thumb .boxcaption { /* -- This is the sliding area -- */
background: #f7c923;
position: absolute;
width:499px;
opacity: .9; /* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.caption .boxcaption {
height:100%;
left: 100%;
}
.project-thumb .content {
width:400px;
display:block;
margin:0 auto;
top:34%;
position: relative;
display:block;
}
** -- EDIT -- **
JS
$('.project-thumb.caption').hover(function(){
$(".cover", this).stop().animate({left:'0%'},{queue:false,duration:0}); //Position on rollover
},function() {
$(".cover", this).stop().animate({left:'100%'},{queue:false,duration:0}); //Position on rollout
});