CSS: как реализовать две анимации для одного действия?

Question

[Discout]

Нужно реализовать анимацию, чтобы при наведении курсора на картинку, она становилась подсвеченной жёлтым и снизу выезжал блок с "доп.информацией". Мою проблему можно увидеть на картинке ниже - свечение убирается, когда курсор на нижнем оранжевом блоке.

Как этого можно избежать? Пробовал с помощью z-index нижний блок убрать под другой блок, но это не то, что нужно.
Часть моего кода можно увидеть здесь: codepen.io/Discout/pen/GiJul

Заранее спасибо.

Answer 1

[cha-cha]

span.first:hover{
  opacity: 1;
}

a:hover span.first{
  opacity: 1;
}

Comments

[Discout]

Я не очень понял, как это должно помочь :(

[cha-cha]

Ищите верхний фрагмент в своем коде и меняйте на нижний.

[Discout]

Большое спасибо!

Answer 2

[Евгений Петров]

Логично отслеживать наведение на контейнере, а не на внутреннем элементе

.gallery-inner:hover span.first {
	opacity: 1;
}