Как сохранить информацию, специфичную для изображения, отображаемую при наведении курсора, чтобы она всегда отображалась ⇐ CSS

[Anonymous]

Вот чего я пытаюсь достичь

И проблема, с которой я столкнулся

Я использую этот HTML:



Проект 1 Лог-лайн: увлекательное путешествие во времени и пространстве.
Кредиты: [*]Режиссер: Джон Доу [*]Продюсер: Джейн Смит [*]Редактор: Алекс Джонсон
https://player.vimeo.com/video/387034973


Проект 2
Лог-лайн: эпическая история о мужестве и самопожертвовании.
Кредиты: [*]Режиссер: Сара Джонсон [*]Продюсер: Майкл Браун [*]Редактор: Эмили Адамс.
https://player.vimeo.com/video/759472047

И этот CSS:

/* Макет временной шкалы */ .Лента новостей { дисплей: гибкий; /* Настраиваем другие свойства горизонтальной строки */ } /* Регулируем расстояние между элементами */ .timeline-item { положение: относительное; поле справа: 10 пикселей; /* Удалить расстояние между элементами */ переполнение: скрыто; /* Убедитесь, что содержимое не переполняется */ } .thumbnail img { ширина: 100%; /* Убедитесь, что миниатюра изображения заполняет контейнер */ } /* Начальное скрытие информационного окна */ .info-box { дисплей: нет; /* Дополнительный стиль для информационного окна */ } /* Эффект при наведении */ .timeline-item:hover .info-box { дисплей: блок; /* Другие стили наведения */ } Любая помощь будет иметь огромное значение. Я усвоил основные принципы, но все еще новую территорию, и мне очень хочется учиться!

Я пробовал разделить информационные карточки на отдельные классы div, чтобы они были независимыми от строки изображения, но безуспешно.