One interesting feature I've added to my video list is a div called "infobox" that slides from the bottom when the mouse hovers over a thumbnail.
This is the script:
<script>
$(document).ready(function(){
$('ul.vlist li').mouseenter(function(){
$('.infobox').animate({bottom : "20px"},300);
$('.attachment-post-thumbnail').css("opacity" , "0.4");
});
$('ul.vlist li').mouseleave(function(){
$('.infobox').animate({bottom : "-60px"},300);
$('.attachment-post-thumbnail').css("opacity" , "1");
});
});
The issue arises when hovering over a thumbnail activates all the infoboxes of other videos in the video list too.
This is the HTML:
<ul class="vlist">
<?php if(have_posts()) { ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( get_option('amn_group') == 'checked') {?>
<?php the_date('', '
<h2 class="title_bar">
<span>', '</span>
</h2>'); ?>
<?php } ?>
<li class="video" id="video_
<?php the_ID(); ?>">
<a href="
<?php the_permalink() ?>" title="
<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) { echo the_post_thumbnail();}else{ ?>
<img src="
<?php echo get_post_meta($post->ID, get_option('amn_thumbs'), true); ?>" width="320" height="160" alt="
<?php the_title(); ?>" />
<?php } ?>
<i></i>
<div class="infobox">
<div class="videotitle">
<strong>
<?php short_title('...', '34'); ?>
</strong>
</a>
</div>
<div class="infoboxborder">
<div>
<div class="sponsor">By:
<?php echo get_post_meta($post->ID, 'sponsered', true); ?>
</div>
<div class="videoTime">
<?php echo get_post_meta($post->ID, 'videolength', true); ?>
</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>