Вообще, в 2017-м году, такое принято делать на SVG, конечно.
Но есть еще одно решение, которое имеет право на жизнь пока еще.
Составить карту изображения через Map Area и подсвечивать. ru.crazysquirrel.ru/tools/generators/map-area
Сколько уже мучений прошло в интернете на эту тему.
Даже решения какие-то были, например, считать через JS все элементы фрейма в выводить сумму высот элементов.
Но нормального решения пока я не видел.
Быть может что-то изменилось)
Когда хотите разобраться с каком-то сайтом / блоком / кодом.
Берите и используйте консоль разработчика, она для этого и придумана.
В браузерах, как правило, вызывается клавишами CTRL+SHIFT+I.
По всем пунктам отвечать подробно лень, поскольку тут вообще всё элементарно.
Вкратце.
1. Можно абсолютным позиционированием (position: absolute;), можно через транформацию (transform: translate;).
2. Самый простой способ: через CSS - background: url('...') 50% 50% / cover no-repeat
Мало того, что разметка непонятная (без head и body), так еще и объяснение хрен поймешь.
Не говоря уж о том, что код можно было в песочницу запилить, а не простыню выкладывать.
Так абзац у тебя не меняет класса, он показан, но скрыт другим блоком.
А цвет меняется, просто слишком быстро, чтобы заметить это) Но он работает)
Если посмотреть с задержкой - https://jsfiddle.net/afk8aox5/2/ - все хорошо.
