html – Hover over Bootstrap button does not work as it should, it only applies on elements

Question:

I have some buttons with bootstrap 4 and mdb, I am trying to make the icon and the text animate when hovering with the mouse, but they only work if I pass over each of them and not over the button.

Code

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.icono:hover img {
  transform: scale(1.2);
}

b {
  transition: 0.5s ease-in-out 0s;
}

b:hover {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>

Answer:

You have to hover over the button and then "navigate" with the selectors to the element you want to animate from there

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover .icono img {
  transform: scale(1.2);
}

b {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover b {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>
Scroll to Top