CSS Hover Thumbnail Image Issue

[Cladon]

Hello!
I am trying to modify a css in order to make a "Watch Live" button appear centered over a thumbnail picture when someone places the mouse over it,but the picture should still be visible around/under this button so it should have some transparency/opacity!

Here is the part of the css where I think I sould make some changes:



#main h1 {font-family: Arial, Tahoma, Helvetica, sans-serif; font-weight: bold; margin-bottom: 22px;}
#posts .post {float: left; display: inline; width: 300px; margin: 0 30px 20px 0; }
#posts .post-last {margin-right: 0;}
#posts .post p {font-size: 1.2em; line-height: 16px;}
#posts .post img {margin-bottom: 12px;}
#posts .post h2, #side h2 {font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 12px; font-weight:normal; margin-bottom: 12px; line-height: 16px; }
#posts .post h2 a {text-decoration: none;}
#posts .post-featured h2 {font-size: 18px; line-height: 22px; }
#posts .post p.postmetadata {font-size: 11px; }
p.postmetadata span.category {text-transform: uppercase;}

#main h1, #single h2, #single h3, #single h4, #single h5, #single h6 {margin-bottom: 15px; }
#main h1 {font-size: 30px; letter-spacing: -1px;}
#single h2 {font-size: 24px; letter-spacing: -1px;}
#single h3 {font-size: 22px; }
#single h4 {font-size: 18px; }
#single h5 {font-size: 16px; }
#single h6 {font-size: 14px; }
#main p {font-size: 12px; }
#main .post ul, #main .post ol {margin: 0.5em 0 0.5em 2.0em; font-size: 1.0em; }
#main .post ol {margin-left: 2.5em;}
#main .post ul li, #main .post ol li {font-size: 1.2em; list-style-type: square; }
#main .post ul li ul li, #main .post ol li ol li {font-size: 1.0em;}
#main .post ol li {list-style-type: decimal;}
#main .post ol li ol li {list-style-type: decimal-leading-zero;}
#main blockquote {font-style: normal; margin:1em 2em; padding: 0.5em 1em 0.5em 2em; }
#main img.preview {padding: 1px; margin: 0; }
#main p.postmetadata {font-size: 1.1em; margin: 0.5em 0 1em 2px; }
#main p.postmetadata span.category {text-transform: uppercase;}
#main div.share {margin:0; padding: 10px 0; height: 25px; }
#main div.share p.header {font-size: 1.1em; font-weight: bold; line-height: 2em; }

#single {width: 630px; float: left; margin-right: 30px; }
#single p img {margin: 0 0 10px 0;}
#main div.single-full {width: 960px; float: none; margin-right: 0; }


And here is the part of the main index template (front page with thumbnails) where the <div> is :



<div id="posts">
<?php
$i = 0;
$m = 0;

$z = count($wpzoom_exclude_cats_home);
if ($z > 0)
{
$x = 0;
$que = "";
while ($x < $z)
{
$que .= "-".$wpzoom_exclude_cats_home[$x];
$x++;
if ($x < $z) {$que .= ",";}
}
}

query_posts($query_string . "&cat=$que");

while (have_posts()) : the_post();

$i++;
$m++;
update_post_caches($posts);
?>
<div class="post<?php if ($i == 3) {$i=0; echo " post-last"; $sep = TRUE; } else {$sep = FALSE;} if ($m < 4) {echo" post-featured";} ?>">
<div class="cover"><?php
unset($img);

if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
?><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php
the_post_thumbnail(array(290,180, true), array('class' => 'bordered'));
?></a><?php
}

else{

if ($wpzoom_cf_use == 'Yes')
{
$img = get_post_meta($post->ID, $wpzoom_cf_photo, true);
} // if CF used
else
{
if (!$img)
{
$img = catch_that_image($post->ID);
}
} // if CF not used

if ($img)
{
?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?h=180&amp;w=290&amp;zc=1&amp;src=<?php echo $img ?>" alt="<?php the_title(); ?>" class="bordered" /></a>
<?php
}

} // if theme does not have a thumbnail


?></div>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<p class="postmetadata"><span class="category"><?php the_category(', '); ?></span> | <span class="timestamp"><?php the_time("$dateformat"); ?></span> | <a href="<?php the_permalink() ?>#commentspost" title="Jump to the comments"><?php comments_number('0 comments','1 comment','% comments'); ?></a><?php edit_post_link( __('EDIT'), ' | ', ''); ?></p>
</div>


And here is the website where you can see how the thumbnail looks: http://www.blogsport.tv
(http://blogsport.tv)
Please help me sort this out!
Thank you!

[petercpwong]

Here's an outline of how it's generally done



<div class="container">
<a href="some/url/" class="button">WATCH ME</a>
<img src="something.jpg" />
</div>




.container{
position:relative;
}
.container a.button{
position:absolute;
top:20px;
left:20px; /* top and left values should be adjusted so it's centered */
display:none;
width:100px;
height:20px; /* width and height values should be adjusted to size of button */
text-indent:-9999px;
background:transparent url('button.jpg') no-repeat scroll 0 0;
}
.container a.button:hover{
display:block;
}

[Cladon]

I see...but I don`t know exactly how to make that code match with my code and where should I modify it in my code...:(
Thank you for the reply !!