Activate hover when hovering over any part of a png image?

Question

css

The image is in png format, part of the image is transparent. I'm trying to replace the logo image with the same one of a different color when hovering over it. When hovering over a transparent part, hover does not work. How can you decide?
https://codepen.io/anon/pen/EQdJjG

Answer 1

1. Why are you shit coding putting two logos side by side for a hover effect when you can do this:

.intro__logo:hover {
  background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
}

instead of this (and the extra logo in the 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. Why is there an extra picture for :hover when you can do it with transparency?

.intro__logo:hover {
opacity: .9;
}

Learn the basics of CSS - you write a lot of superfluous stuff.