<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.