<p>マウスホバーすると画像が変わったように見える</p>
<div class="sprite"></div>

<p>元画像はこんな感じ↓</p>
<div>
  <img src="https://drive.google.com/uc?export=view&id=1PD0UEG_ANmpTHvfgSKDirHsyDUEOWtMj" alt="元画像">
</div>
.sprite {
  width: 96px;
  height: 96px;
  border: 3px solid gold;
  background: url("https://drive.google.com/uc?export=view&id=1PD0UEG_ANmpTHvfgSKDirHsyDUEOWtMj") no-repeat #eee;
  background-position: 0 0;
}
.sprite:hover {
  background-position: 0 -96px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.