Different Wordpress Featured Image Overlay Effect

I have a grid of images (created by the featured image of each posts) and would like to have a hover effect applied to each image.

I would like it to display the title of the post with a coloured overlay. The entire image is overlaid/replaced with a coloured background with the post title contained within the image box.

The big thing is though, I would like there to be different coloured backgrounds for each post.

current code

<div class="single-featured-image">

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php if ( has_post_thumbnail()) : the_post_thumbnail('full'); endif; ?>

</div>

with the css trying to change the post h2 tag to fill the space of the thumbnail (using margin/padding )

Not working to say the least