JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="cliplevel1 step">
	<img class="type2 dir4" src="http://www.spriters-resource.com/ds/pokeheartgoldsoulsilver/kantopokemon.png">
	</div>
	<div class="clip solution">
	<div class="type2 dir4 color2 reflecty damagey">
	<img src="http://www.spriters-resource.com/ds/pokeheartgoldsoulsilver/kantopokemon.png">
	</div>
	</div>

CSS

.clip {width: 32px; height: 32px; overflow: hidden;
}
.type1             { position: relative;}
.type2             { left: -32px; position: relative;}

.dir1             { }
.dir2             { top: -32px}
.dir3             { top: -64px}
.dir4             { top: -96px}

.color2 img  { left: -64px; position: relative;}

.reflecty img  { top: -128px}
.damagey img  { top: -256px}
.reflecty.damagey img  { top: -384px}

.solution {left: 15px; top: 255px;position: absolute;}

.cliplevel1        { height: 128px; width: 64px; overflow: hidden;}
.step {left: 12px; top: 63px;position: absolute;}