title: Add a very basic color overlay with text
body: <p>I am looking for some advice on how to add rollover effect to my WordPress post images. Now the image are pulled in and set as background images so It makes it tricky for me. Here is my code:</p>
  
  <pre><code>&lt;div class="portfolio-image" style="background: url(&lt;?php echo $src[0]; ?&gt; ); background-size: cover;"&gt;
  
  
      &lt;h2 style="margin:0; padding: 0;"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
  
              &lt;?php echo get_the_tag_list('&lt;p&gt; | ','&amp;nbsp;&amp;nbsp; | ','&lt;/p&gt;'); ?&gt;
  
      &lt;/div&gt;
  
  .portfolio-image{width: 324px; height: 280px; background-repeat:no-repeat; box-sizing: border-box; border:2px solid #fff; padding: 20px; float: left;}
  </code></pre>
  
  <p>Now I tried wrapping the div and applying a hover effect to that div but it reverses what I want so it hovers over and show my post image. what I need it to do is show the image as normal but when you hover over the image the image darkens and the title to appear over the top. really struggling to figure it out as it is a background image.</p>