Hi all Im a noob to javascript and am having problems with getting text to overlay an image when using the jcarousel plugin.

Im generating the list of images and titles from a wordpress query and have tried everything to make text overlay the image on a nicely semi transparent box. I got half way there with a div in a li but thats' not good apparently?

So im trying to find a way to use a <span> to hold the title and overlay it on a slide item in jcarousel any tips, tutorials, links would be a great help or anyone know ofa a carousel which has support for overlaid boxes from the start?


<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<?php $my_query = new WP_Query('cat=Lounge&showposts => -1 query_posts&post_status=future,publish'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;'&order=ASC&post_status=future,publish' ?>
<?php set_post_thumbnail_size( 180, 120, true ); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();?> <span><?php the_title();?></span> </a>
</li>
<?php endwhile; ?>
</ul>
</div>