<p>マウスホバーかタップしてみて</p>
<div class="container">
    <img class="transform-img" src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="">
</div>
/* 黒枠 */
.container {
	height: 150px;
	outline: 1px solid #000;
	width: 300px;
}

/* transform要素 */
.transform-img {
	background-color: #2188b6;
	height: 120px;
	transition: transform 1.5s;
	width: 120px;
}

.container:hover {
	cursor: pointer;
}

.container:hover .transform-img {
	transform: translate(180px , 30px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.