Тарас Шульга

Лучше юзать то что, что лучше подходит данной задачи.
Вы напоминаете мне многих новичков которые думаю, что есть какой-то ультра четкий план - тип делай так и так и будешь топ

Чисто в теории можно. Фигачим Овер 9999 спанов/дивов/да хоть имж.
Потом секции даём overflow: hidden
И потом начинаем менять позицию этих спанов через 999 классов и кейфромс.
Но вопрос - стоит ли оно того?)

Тут несколько вариантов.
1. Если это img баловался фильтрами
2. Как ещё делали делаем группировку красной и обычной иконки и меняет позицию внутри картинки.
3. Не страдаем хернёй делаем svg анимирует fill
4. Используем шрифтовые иконки и меняем color.

Я бы задал Макс ширину и все, через бр не надёжно (как минимум, вдруг потом будет какая нить админка и человек захочет, что-то поменять, а ты ему потом объясни, что там какой-то бр переносит) ну и плюс в адаптиве иногда принудительный перенос страдает.

Через before, а в чем трудность?

Если по простому то js это манипуляция с Документом и его стилями (html+css).
Ну и собственно вопрос как вы собираетесь нормально манипулировать с DOM деревом если даже нормально его не понимаете?
Но так же я вам не говорю до талова заучивать теги и бла-бла, я говорю, что вы должны нормально понимать, что да как там строиться.

htmlbook.ru/css/outline вот почитайте. Нужно для удобства управление с клавы. Удалить outline: none. Это стандартный класс браузера. Вообще не рекомендуют убирать пока не прописал альтернативу

Там где карта задайте w100% а не фикс значение и все.

https://codepen.io/angryyum/pen/zYxMvqm магия двух строчек css - если правильно вас понял.