Андрей Широких

1. Вы можете создать любой уникальный хедер header-{name}.php или футер footer-{name}.php и подключать в шаблон например так

if ( is_home() ) {
	get_header('home');
} elseif ( is_404() ) {
	get_header('404');
} else {
	get_header();
}

2. Эти же самые условия будут работать и в самом файле header.php

if ( is_home() ) {
	// тут контент уникального хедера домашней страницы
} else {
	// тут контент общего хедера для остальных страниц
}

Теория

хотфикс решение:

.about-photo1-mobile:hover .about-photo1-hover {
    display: block;
    width: 762px;
    height: 722px;
    left: calc(50% - 332px/2 - 1px);
    background: rgba(237, 231, 230, 0.9);
    margin-top: -380px;
    padding-top: 47px;
    transform: translate3d(0,0,0); /* new */
}

Я так почитал комментарии, и, Автор, вопрос ты задал крайне непонятно )) Если я правильно понял вашу проблему, то:
Да, по спецификации HTML на странице может быть только один элемент с уникальным ID. Следовательно любой код, браузер работает исходя из этого: Нужно проскролить к такому-то элементу. Находится первый подходящий. Поскольку предполагается что других таких быть не может -- поиск прекращается.
Вариантов решения у вас два:

1. Не вставлять одну из секций для устройств. например по условию wp_is_mobile.
   
2. На клиенте, удалять один из блоков посредством JS.
   

Происходит потому, что при наведении к примеру на 1й пиксель слева срабатывает ховер, но элемент уходит на 4 пикселя влево и соответственно происходит зацикливание.
Можно исправить делая смещения не transform, а padding
в обычном состоянии padding-left: 0;
hover {padding-left: 4px)
тогда элемент остается всегда на своем месте