title: Hover color overlay that affects multiple elements
body: <p>Heres where I'm at:
  <a href="http://codepen.io/qdarkness/pen/FyIJh" rel="nofollow">http://codepen.io/qdarkness/pen/FyIJh</a></p>
  
  <p>Ideally, how I imagine it at least, is when a user hovers over the <code>&lt;a&gt;</code> that the <code>&lt;div&gt;</code>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.</p>
  
  <p>I'm suspecting the fact that I have the <code>&lt;img&gt;</code> inside the <code>&lt;div&gt;</code> that it is not working properly, but I am using that div to constrain the <code>img</code> width and height.</p>
  
  <p>I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <code>&lt;div&gt;</code>?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li class="b c d"&gt;
    &lt;a href="" class="link"&gt;
      &lt;div class="img-holder overlay"&gt;&lt;img src="img/test.jpg"&gt;&lt;/div&gt;
      &lt;div class="tag overlay"&gt;
        &lt;h3&gt;test&lt;/h3&gt;
        &lt;h4&gt;test&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.img-holder {
    width: 235px;
    height: 195px;
    overflow: hidden;
  }
  
  .tag {
    clear:both;
    position:relative;
    float:left;
    width: 100%;
    overflow:hidden;
    background-color: #FFF;
    text-align: center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  
  a:hover .overlay {
    background: #909090;
    z-index: 301;
  }
  </code></pre>