<h1>Transform: translate<h1>
  <div class="img-container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/780593/Character%2036%20%20(1).png" alt="">
</div>
body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
  font-family: Inconsolata, monospace;
  color: #F1F1F1;
  text-align: center;
  height: 100vh;
}
.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  width: 400px;
  transition: 0.5s ease-in;
}
img:hover {
transform: translate(100px, -100px);
 // transform: translateX(100px); 
 // transform: translateY(-100px);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.