title: Different Wordpress Featured Image Overlay Effect
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The big thing is though, I would like there to be different coloured backgrounds for each post. </p>
  
  <p>current code (content page.php) - </p>
  
  <pre><code>  &lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('col-md-4 col-sm-4 pbox '); ?&gt;&gt;
      &lt;?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 &amp; crop the image
      ?&gt;
  
      &lt;?php if($image) : ?&gt;
      &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt; &lt;img class="img-responsive" src="&lt;?php echo $image ?&gt;"/&gt;&lt;/a&gt;
      &lt;?php endif; ?&gt; 
  
      &lt;div class = "box-ovrly"&gt;
        &lt;h2 class="box-title"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
        &lt;div class="box-meta"&gt;&lt;?php the_category(', '); ?&gt;&lt;/div&gt;
      &lt;/div&gt;
  
   &lt;/article&gt;&lt;!-- #post-## --&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>ex. </p>
  
  <pre><code>&lt;a href="#" id="box-ovrly"&gt;&lt;img src="http://1.bp.blogspot.com/-    todb82eBRF4/T2iE-lgY2LI/AAAAAAAABNo/HMhNfppjrHg/s1600/reddit%2Balien.JPG"&gt;    &lt;p&gt;REDDIT!&lt;/p&gt;&lt;/a&gt; 
  </code></pre>
  
  <p>with the hover absolute positioned over the image</p>