Почему transition в обратную сторону не срабатывает?

Question

[Happymalina]

Привет! Ни как не могу понять что я делаю не так, задаю для ховеров на ссылки transition: all 0.2s easy-in-out . Для простых ссылок, там где просто цвет изменить все отлично срабатывает. А вот для бэкграунда при наведении отлично, но когда убираешь курсор со ссылки стиль для состояния ховера(бэкграунд или opacity) резко пропадает, нагуглила кучу примеров самых простых - там все работает и на наведение и "отведение". А в моих примерах не прокатывает( Подскажите что я делаю не так??

.b-examples-project-block_item-title {
  height: 80px;
  width: 380px;
  opacity: 0.8;
  background: #FFFFFF;
  position: absolute;
  bottom: 0;
  line-height: 74px;
  left: 0;
  padding: 0 0 0 16px;
}
.b-examples-project-block_link:hover .b-examples-project-block_item-title {
  opacity: 1;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

Answer 1

[tkgarret]

Уберите транзишн из ховер и напишите в класс выше. Вот так:

.b-examples-project-block_item-title {
height: 80px;
width: 380px;
opacity: 0.8;
background: #FFFFFF;
position: absolute;
bottom: 0;
line-height: 74px;
left: 0;
padding: 0 0 0 16px;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
.b-examples-project-block_link:hover .b-examples-project-block_item-title {
opacity: 1;
}

Comments

[Мири Сеидов]

Спасибо, помог! <3