Почему код работает не полностью?

Question

[mr jeery]

https://codepen.io/Jeerjmin/pen/MrKgRW
Почему первые два изображения не анимируются при наведении.
Различия в HTML коде между первые двумя блоками и всеми остальными в том, что они записаны в несколько строк.
Как записать код в несколько строк, но притом чтобы работал ?

Мой предыдущий вопрос был удален я не понял почему, тк проблема не решена и вопрос по прежнему открыт. Возможно из-за вызывающего названия или моей формулировки, но прошу простить я с таким не сталкивался и не понимаю в чем разница ?

Answer 1

[Dmitriy Uvarov]

Разница в состоит в том, что перенос строки является символом, а это значит что в дочерних узлах появится текст, а значит что ссылки

var overlay = this.childNodes[1];
var image = this.childNodes[0];

будут неверными, а следовательно ваша анимация работать не будет. В таком случае просто ищите элемент внутри элемента, вместо поиска узла. Попробуйте отладить код прежде, чем писать свой вопрос, отладка наша все