Как реализовать событие при наведении мыши, как на картинке?

Большое спасибо за ответ)

Как реализовать событие при наведении мыши, как на картинке?

Я пытаюсь отрисовать все без плагинов. Для своего интереса)

Почему при отрисовке происходит вот так?

Фух, большое спасибо. Извиняюсь за свою невнимательность)

Почему после запуска js кода не срабатывает медиа-запроc?

Проблема появляется только после запуска этого конкретного куска кода