<img class="ninja1" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
    <img class="ninja2" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
    <img class="ninja3" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">

img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.ninja1:hover {
  transform: translateY(50px);
}

.ninja2:hover {
  transform: scale(1.5);
}

.ninja3:hover {
  transform: rotate(45deg);
}

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
}