CSS悬停效果不起作用

Question

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

Answer 1

Hi change the opacity for the overlay to 1 and you're there. :) It's currently set to opacity: 0 for your hover class.

Answer 2

Do you have a hover state to change the opacity to 1? For example:

a:hover .cd-img-overlay { opacity: 1; }

Answer 3

add this to your code an it will work .. its just because on hover you are not changing the opacity to 1.

 #cd-team li:hover .cd-img-overlay {
    opacity: 1;
 }

Answer 4

You are not changing the opacity to 1 when hovering. That's why the problem is. Use the following code that is present in the working url.

.no-touch #cd-team li:hover .cd-img-overlay { opacity: 1; }