Simple CSS Problem - Need Help [PIC] - Paying money $

Hey all. I'm trying to change the way that the category spoilers in the sidebar of my Wordpress blog are styled, but I'm having trouble. I'm hoping that someone will be able to point me in the right direction or even write a few lines of code. I feel like this is a relatively simple thing to do. Please help if you can!

Here are images for what im trying to do:
Currently it looks like this:


Here is the current code (I deleted some irrelevant lines)

<div class="spoiler clearfloat">
	
	<h3 class="catt-<?php echo $cp_pC; ?>"><a href="<?php echo get_category_link( $cp_pC ); ?>"><?php single_cat_title() ?> &raquo;</a></h3>
	
				<div class="clearfloat">
		  		<h4 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
				
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $image_src; ?>&amp;w=<?php echo $width; ?>&amp;h=<?php echo $height; ?>&amp;zc=1&amp;q=100"
    alt="<?php the_title(); ?>" class="left" width="<?php echo $width; ?>px" height="<?php echo $height; ?>px"  /></a><?php } ?>

				<?php $status = get_settings ( "cp_excerptSpoilers" );		if ( $status != "no" ) { ?>
				<?php the_excerpt() ?>
				<?php } ?>
				</div>
				<div class="right"><a href="<?php echo get_category_link($cp_pC);?>"><?php _e('More articles &raquo;','arthemia');?></a></div>
</div>

PHP:

I want it to look like this afterward:

Notice how the permalink title has shifted to be on top of the image, and how there is a dark box behind it.


Any ideas? Whoever helps me solve this problem will receive my gratitude and some money via Paypal.

I would like this to be similar to whats on http://www.engadget.com/ in the right hand side slider

 

PM sent please check your inbox.

 

pm sent

anyone think they could do this for me?

 

This work has done. Thank you for fast payment.