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

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 !!