CSS Наложение эффекта на зависание не работает

Кто-нибудь знает, почему мой класс .cd-img-overlay не работает, когда я наводил курсор на элемент списка?CSS Наложение эффекта на зависание не работает

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>

Я не могу показаться, чтобы получить этот класс наложения работать как ш в этом уроке этого урока: https://codyhouse.co/demo/side-team-member-bio/index.html

источник

2016-06-12 redshift

Вопросы, требующие помощи по коду, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. Хотя вы предоставили ссылку [** на сайт или пример **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work -can-i-just-paste-a-link-to-it), если ссылка станет недействительной, ваш вопрос не будет иметь ценности для других будущих пользователей SO с той же проблемой. –

Что делать, если вы попробуете # cd-team .cd-img-overlay: hover {? –

Что сказал Paulie_D, попробуйте создать минимальный пример. Я бы даже поставил на то, что создание минимального примера будет сортировать вашу проблему. Это связано с тем, что в моем браузере переход CSS происходит с '.cd-member-info' вместо' .cd-img-overlay'. Бьюсь об заклад, вы получили неправильные селекторы в таблице стилей. – grochmal

Привет, измените непрозрачность для наложения на 1, и вы там. :) В настоящее время он установлен на непрозрачность: 0 для вашего класса hover.

источник

2016-06-12 19:04:30

добавить это в ваш код он будет работать .. его только потому, что при наведении курсора мыши вы не изменяя непрозрачность 1.

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

источник

2016-06-12 19:06:03

У вас есть состояние парения, чтобы изменить непрозрачность до 1? Например:

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

источник

2016-06-12 19:06:04 jafaircl

Вы не изменяете непрозрачность до 1 при падении. Вот почему проблема. Используйте следующий код, который присутствует в рабочем URL-адресе.

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

источник

2016-06-12 19:07:21 SESN

CSS Наложение эффекта на зависание не работает

ответ

Смежные вопросы