CSS Overlay effect on hover not working

Does anyone know why my .cd-img-overlay class is not working when I hover over a list item?

My live code here

CSS:

#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;
}

HTML:

<li>
    <a href="#0" data-type="member-1">
        <figure>
            <img src="images/bruce.jpg" alt="Team member 1" />
            <div class="cd-img-overlay"><span>View Bio</span></div>
        </figure>
        <div class="cd-member-info">
            John Smith <span>Founder &amp; President</span>
        </div>
    </a>
</li>

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: https://codyhouse.co/demo/side-team-member-bio/index.html