1. Зачем вы говнокодите, размещая два логотипа рядом для hover-эффекта, когда можно сделать так:
.intro__logo:hover {
background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
}
вместо этого (и лишнего логотипа в DOM):
.intro__logo:hover {
display: none;
}
.intro__logo:hover ~ .intro__logo--blue {
display: block;
}
.intro__logo--blue {
width: 62px;
height: 57px;
background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
display: block;
float: left;
display: none;
}
2. Зачем для :hover лишняя картинка, когда можно сделать с прозрачностью?
.intro__logo:hover {
opacity: .9;
}
Выучите азы CSS — вы пишите много лишнего.