Создание активного состояния для заголовка при наведении на страницу загрузки

Question

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

Я пытаюсь найти способ сделать первую ссылку (заголовок 1) активным классом. на странице загрузки. Поэтому, когда зритель впервые заходит на страницу, заголовок подчеркивается, и изображение показывается. Затем, когда мы наводим курсор мыши на другие ссылки, появляются другие изображения.

Я нашел кого-то, кто сделал что-то подобное здесь, используя java: https://codepen.io/extrachrisb/pen/byVvjy

Я попытался адаптировать его к своему коду, и это сработало над названием сам (текст) но не изображение.

вот мой код на codepen: https://codepen.io/Chacam/pen/KKpYXYN

На данный момент скрипт выглядит так, и мне нужно скопировать его для изображения:

const module = document.getElementsByClassName('list')[0];
//
module.addEventListener('mouseover', function() {
  const firstBox = document.getElementsByClassName('hover-title')[0];
  firstBox.classList.remove('active');
  //

})

Спасибо тебе !!!