title: CSS Overlay effect on hover not working
body: <p>Does anyone know why my <code>.cd-img-overlay</code> class is not working when I hover over a list item? </p>
  
  <p><a href="http://ogmda.com/sandbox/intec2/about2.php" rel="nofollow"><strong>My live code here</strong></a></p>
  
  <blockquote>
    <p>CSS:</p>
  </blockquote>
  
  <pre><code>#cd-team .cd-img-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(92, 75, 81, 0.9);
      opacity: 0;
      border-radius: .25em .25em 0 0;
      -webkit-transition: opacity 0.3s;
      -moz-transition: opacity 0.3s;
      transition: opacity 0.3s;
  }
  </code></pre>
  
  <blockquote>
    <p>HTML:</p>
  </blockquote>
  
  <pre><code>&lt;li&gt;
      &lt;a href="#0" data-type="member-1"&gt;
          &lt;figure&gt;
              &lt;img src="images/bruce.jpg" alt="Team member 1" /&gt;
              &lt;div class="cd-img-overlay"&gt;&lt;span&gt;View Bio&lt;/span&gt;&lt;/div&gt;
          &lt;/figure&gt;
          &lt;div class="cd-member-info"&gt;
              John Smith &lt;span&gt;Founder &amp;amp; President&lt;/span&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I can't seem to get that overlay class to work like shown in this tutorial's demo when you hover over a team member: <a href="https://codyhouse.co/demo/side-team-member-bio/index.html" rel="nofollow">https://codyhouse.co/demo/side-team-member-bio/index.html</a></p>