Как сделать чтобы элемент появлялся при наведении на блок?

Question

[Rimidbit]

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

<article class="person">
      <section class="photo">
        <img
          src="https://mate-academy.github.io/fe-program/css/tasks/athletes/people/Mayweather.jpg"
          alt="Floyd Mayweather"
        >
        <span class="rank">1</span>
      </section>
      <section class="details">
        <a class="name">Floyd Mayweather</a>
        <section class="extra">
          <span class="sport">Boxing</span>
          <span class="pay">285</span>
        </section>
      </section>
    </article>

.extra {
  font-size: 18px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.person:hover .extra {
  opacity: 1;
}

почему не работает?

Comments

[Ankhena]

Сложно сказать.
У нас работает.

Сделайте песочницу с видимой проблемой на codepen.io

[Rimidbit]

Ankhena, https://codepen.io/Rimid-bit/pen/YzRrjpL

[Максим]

Rimidbit, у вас там ошибочка была,
у вас было так =>

.person:hover ~.extra {
  opacity: 1;
}

а надо вот так =>

.person:hover .extra {
  opacity: 1;
}

[Ankhena]

Rimidbit, да ))) В вопросе правильный код, а в песочнице уже нет :)