Vantage Theme – overlay the category name as a link on an image in the post loop

Hello

Thanks for this theme – it’s excellent and the best I’ve tried yet!

I would like to overlay the category name as a link on an image in the post loop. I did some tweaking to loop-grid.php and managed to get the category name to display above the image as plain text. However, I’d like to overlay it on the image with an opaque background. The Smart-Mag theme does this:

http://themeforest.net/item/smartmag-responsive-retina-wordpress-magazine/full_screen_preview/6652608

Here’s the code I tweaked for loop-grid.php

<?php
/**
 * Loop Name: Grid
 */
?>
<?php if( have_posts() ) : $i = 0; ?>

	<div class="vantage-grid-loop">
		<?php while( have_posts() ): the_post(); $i++ ?>
			<article <?php post_class(array('grid-post')) ?>>

<?php 
$category = get_the_category(); 
if($category[0]){
echo '<a href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';
}
?>
				<?php if( has_post_thumbnail() ) : ?>
					<a class="grid-thumbnail" href="<?php the_permalink() ?>">
						<?php the_post_thumbnail('vantage-grid-loop') ?>
					</a>
				<?php endif; ?>

				<h3><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
				<div class="excerpt"><?php the_excerpt() ?></div>
			</article>
			<?php if($i % 2 == 0) : ?><div class="clear"></div><?php endif; ?>
		<?php endwhile; ?>
	</div>

	<?php vantage_content_nav( 'nav-below' ); ?>

<?php endif; ?>

URL: http://amsterdamforvisitors.com/