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 (content page.php) –

  <article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a>
    <?php endif; ?> 

    <div class = "box-ovrly">
      <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
      <div class="box-meta"><?php the_category(', '); ?></div>
    </div>

 </article><!-- #post-## -->

Struggling to figure out how to overlay in general, then move on to more complicated styling like specific colours. The examples I found use the link tags ‘hover’ effect but I can’t manipulate that to work for me

ex.

<a href="#" id="box-ovrly"><img src="http://1.bp.blogspot.com/-    todb82eBRF4/T2iE-lgY2LI/AAAAAAAABNo/HMhNfppjrHg/s1600/reddit%2Balien.JPG">    <p>REDDIT!</p></a> 

with the hover absolute positioned over the image