title: How to make both text and background color highlight on hover?
body: <p>I am trying to create a grid style portfolio page in which the title highlights when hovered over. I would like also a background color to show over the image as well. I have created both of these but can't figure out how to have them happen at the same time. Below is the HTML and CSS as well as the link to see what I mean in action. </p>
  
  <pre><code>.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
  .home_blog_box img { width: 287px; height: 201px;  }
  .home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
  .home_blog_box h3:hover {background-color: #777777; opacity:.85;}
  .home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
  .home_blog_box h3 a:hover {opacity:1}
  
  
  &lt;div class="home_blog_box"&gt;
  &lt;?php } ?&gt;
    &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_post_thumbnail('featured-blog'); ?&gt;&lt;/a&gt;
      &lt;h3&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
  &lt;/div&gt;&lt;!--//home_blog_box--&gt;  
  </code></pre>
  
  <p>Thanks!</p>