LI4NOOST

const createTimerAnimator = () => {
  let intervalId
  return (time) => {
    if (intervalId) clearInterval(intervalId)
    const visibleResult = () => {
      const formatter = Intl.NumberFormat(undefined, {
        minimumIntegerDigits: 2
      })
      const hours = formatter.format(Math.floor(time / 60 / 60))
      const minutes = formatter.format(Math.floor(time / 60) - (hours * 60))
      const seconds = formatter.format(time % 60)
      timerEl.textContent = `${hours} : ${minutes} : ${seconds}`
    }
    visibleResult()

    intervalId = setInterval(() => {
      if (time > 0) {
        visibleResult(time--)
      } else {
        clearInterval(intervalId)
      }
    }, 1000)

  }
}

Сделайте обертку для элемента, который хотите анимировать при появлении и навешивайте эффекты появления на обертку, а ховеры уже на конкретный элемент, чтобы не переопределялись свойства ваши и библиотеки

нет ли у<div class="image__block image__block_bottom">стиля overflow:hidden; ?

еще как вариант - попробуйте не оборачивать картинку дивом, пусть она будет спозиционирована сразу в родительском элементе <div class="first">

а вот <div class="first">пропишите отступ padding-right в ширину картинки + 10-15px для красивого отступа от блока с текстом

По примеру кажется, что не хватает теории по рендерингу, хукам и стейт-менеджменту - почитайте теорию с примерами.

Вам нужно tasks менять через Redux, а именно через dispatch(). Если вы просто мутируется массив, это не изменит стейт, а значит не вызовет перерендер.

function renderItem(cardData) {
    const newCard = cardTemplate.cloneNode(true);
    const cardTitle = newCard.querySelector('.card__title');
    const cardImage = newCard.querySelector('.card__image');

    cardImage.src = cardData.link;
    cardTitle.textContent = cardData.name;
 
    container.append(newCard);
 }
renderItem(); //← поэтому семь
render();

Можно добавить overlay, на который повесить обработчик события.
Добавляем overlay:

<div class="overlay">
<div class="menu">
//code...
</div>
</div>

И добавляем скрипт на закрытие:

function addMenu () {
menu.style.display = 'block'
overlay.style.display = 'block'
overlay.addEventListener('click', closeMenu)
}
function closeMenu(e) {
if (e.target.classList.contains('overlay')) {
menu.style.display = 'none'
overlay.style.display = 'none'
overlay.removeEventListener('click')
}
}

То есть, мы вешаем слушатель клика по overlay и проверяем кликнули ли по самому overlay или по попапу. Если по overlay, то закрываем overlay и попап.

Ну и, конечно, лучше оперировать классами в этом случае, а не стилями. Классами проще, и проще анимировать все это дело.