JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cliplevel1 step">
	<img class="type1 dir1" src="http://www.spriters-resource.com/ds/pokeheartgoldsoulsilver/kantopokemon.png">
	</div>
	<div class="clip solution">
	<div id="idsolution" class="type1 dir1">
	<img src="http://www.spriters-resource.com/ds/pokeheartgoldsoulsilver/kantopokemon.png">
	</div>
	</div>
<input type="button" value="type1" onclick="javascript:type1();">
<input type="button" value="type2" onclick="javascript:type2();">
<input type="button" value="dir1" onclick="javascript:dir1();">     
<input type="button" value="dir2" onclick="javascript:dir2();">
<input type="button" value="dir3" onclick="javascript:dir3();">
<input type="button" value="dir4" onclick="javascript:dir4();">            
<input type="button" value="col1" onclick="javascript:col1();">                <input type="button" value="col2" onclick="javascript:col2();">                
<input type="button" value="dam n" onclick="javascript:damn();">                    <input type="button" value="dam y" onclick="javascript:damy();">                <input type="button" value="ref n" onclick="javascript:refn();">                    
<input type="button" value="ref y" onclick="javascript:refy();">

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;}

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

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

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

JavaScript

function type1 ()
{
    $('#idsolution').removeClass("type1");
    $('#idsolution').removeClass("type2");
    $('#idsolution').addClass("type1");
}

function type2 ()
{
    $('#idsolution').removeClass("type1");
    $('#idsolution').removeClass("type2");
    $('#idsolution').addClass("type2");
}

function dir1 ()
{
    $('#idsolution').removeClass("dir1");
    $('#idsolution').removeClass("dir2");
    $('#idsolution').removeClass("dir3");
    $('#idsolution').removeClass("dir4");
    $('#idsolution').addClass("dir1");
}
function dir2 ()
{
    $('#idsolution').removeClass("dir1");
    $('#idsolution').removeClass("dir2");
    $('#idsolution').removeClass("dir3");
    $('#idsolution').removeClass("dir4");
    $('#idsolution').addClass("dir2");
}
function dir3 ()
{
    $('#idsolution').removeClass("dir1");
    $('#idsolution').removeClass("dir2");
    $('#idsolution').removeClass("dir3");
    $('#idsolution').removeClass("dir4");
    $('#idsolution').addClass("dir3");
}
function dir4 ()
{
    $('#idsolution').removeClass("dir1");
    $('#idsolution').removeClass("dir2");
    $('#idsolution').removeClass("dir3");
    $('#idsolution').removeClass("dir4");
    $('#idsolution').addClass("dir4");
}
function col1 ()  {  $('#idsolution').removeClass("color2");}
function col2 () {     $('#idsolution').addClass("color2");}
function damn ()  {  $('#idsolution').removeClass("damagey");}
function damy () {     $('#idsolution').addClass("damagey");}
function refn ()  {  
    $('#idsolution').removeClass("reflecty");
    $('#idsolution').addClass("reflectn");
}
function refy () {
    $('#idsolution').removeClass("reflectn");
    $('#idsolution').addClass("reflecty");
}