JSFiddle - React, Tailwind, and code Playground

HTML

<div id="schoenen" class="pos">
<table width="120" height="120" border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td width="120" class="titel">test 1<br />
      <img src="images/cam_rood.png" width="26" height="21" /></td>

  </tr>

</table>
</div>

<div id="casual" class="pos">
<table width="120" height="120" border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td width="120" height="120" class="titel">test 2<br />
      <img src="images/cam_oranje.png" width="26" height="21" /></td>
  </tr>
  
    
</table>
</div>

<div id="ceremonie" class="pos">
<table width="120" height="120" border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td width="120" class="titel">test 3<br />
      <img src="images/cam_blauw.png" width="26" height="21" /></td>
  </tr>
   
</table>
</div>

<div id="communie" class="pos">
<table width="120" height="120" border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td width="120" height="120" class="titel">test 4<br />
      <img src="images/cam_groen.png" width="26" height="21" /></td>
  </tr>

   
</table>
</div>



<div id="blauw_een" class="schuif_blauw rechts"><a href="#" class="link_blauw">boy</a></div>
<div id="blauw_twee" class="schuif_blauw boven"><a href="#" class="link_blauw">girl</a></div>

<div id="groen_een" class="schuif_groen links"><a href="#" class="link_groen">boy</a></div>
<div id="groen_twee" class="schuif_groen onder"><a href="#" class="link_groen">girl</a></div>

<div id="oranje_een" class="schuif_oranje rechts"><a href="#" class="link_oranje">boy</a></div>
<div id="oranje_twee" class="schuif_oranje onder"><a href="#" class="link_oranje">girl</a></div>

<div id="rood_een" class="schuif_rood links"><a href="#" class="link_rood">boy</a></div>
<div id="rood_twee" class="schuif_rood boven"><a href="#" class="link_rood">girl</a></div>

</div>
</div>

<div id="bg_home" class="bg"></div>
</body>
</html>

CSS

.pos{
	position: absolute;
	overflow:hidden;
	/*z-index:1;*/
	/*opacity:0.8;*/
	color:#FFF;
	font-weight:bold;
	font-size:14px;
	

}

.pos:hover{
	/*opacity:1;*/
}

#kies{
    width: 120px;
    height: 120px;
	left:360px;
	top:240px;
	cursor: default;
}

#schoenen{
    width: 120px;
    height: 120px;
	background-color:#d9504d;
	left:360px;
	top:0px;
	cursor: pointer;
	z-index:99;
}


#casual{
	width: 120px;
	height: 120px;
	background-color:#ff8f00;
	left:240px;
	top:120px;
	cursor: pointer;
	z-index:99;
}

#ceremonie{
    width: 120px;
    height: 120px;
	background-color:#009cd6;
	left:120px;
	top:240px;
	cursor: pointer;
	z-index:99;
}

#communie{
    width: 120px;
    height: 120px;
	background-color:#739e00;
	left:240px;
	top:360px;
	cursor: pointer;
	z-index:99;
}

.links{
	background-image:url(../images/bg_links.png);
	background-position:left;
	background-repeat:no-repeat;
}

.rechts{
	background-image:url(../images/bg_rechts.png);
	background-position:right;
	background-repeat:no-repeat;
}

.boven{
	background-image:url(../images/bg_boven.png);
	background-position:left;
	background-repeat:no-repeat;
}

.onder{
	background-image:url(../images/bg_onder.png);
	background-position:bottom;
	background-repeat:no-repeat;
}


a.link_rood,
a.link_rood:link,
a.link_rood:visited,
a.link_rood:active {
	font-family: 'PT Sans', sans-serif;
	font-size:13px;
	color:#FFF;
	font-weight: bold;
	text-decoration:none;
	text-transform:uppercase;
	background-color: #863331;
	padding:8px 10px 9px 10px;
	border:1px dashed #FFF;
	
}

a.link_rood:hover {

	color:#863331;
	background-color: #FFF;
	border:1px dashed #863331;
}


a.link_oranje,
a.link_oranje:link,
a.link_oranje:visited,
a.link_oranje:active {
	font-family: 'PT Sans', sans-serif;
	font-size:13px;
	color:#FFF;
	font-weight: bold;
	text-decoration:none;
	text-transform:uppercase;
	background-color: #a4681b;
	padding:8px 10px 9px 10px;
	border:1px dashed #FFF;
}

a.link_oranje:hover...

JavaScript

$(document).ready(function () {
	

	
$("#schoenen").toggle(
function () { 

	//schoenen
    $("#rood_een").animate({'left':'480px'});
	$("#rood_twee").animate({'top':'120px'});
	
	//casual
    $("#oranje_een").animate({'left':'240px'});
	$("#oranje_twee").animate({'top':'120px'});
	
	//schoenen
    //$("#rood_een").animate({'left':'360px'});
	//$("#rood_twee").animate({'top':'0px'});
	
	//ceremonie
 	$("#blauw_een").animate({'left':'120px'});
	$("#blauw_twee").animate({'top':'240px'});
	
	//communie
    $("#groen_een").animate({'left':'240px'});
	$("#groen_twee").animate({'top':'360px'});
	

},
function () { 

    $("#rood_een").animate({'left':'360px'});
	$("#rood_twee").animate({'top':'0px'});
	
	
});



$("#casual").toggle(
function () { 
	
	//casual
    $("#oranje_een").animate({'left':'120px'});
	$("#oranje_twee").animate({'top':'0px'});
	
	//casual
   // $("#oranje_een").animate({'left':'240px'});
	//$("#oranje_twee").animate({'top':'120px'});
	
	//schoenen
    $("#rood_een").animate({'left':'360px'});
	$("#rood_twee").animate({'top':'0px'});
	
	//ceremonie
 	$("#blauw_een").animate({'left':'120px'});
	$("#blauw_twee").animate({'top':'240px'});
	
	//communie
    $("#groen_een").animate({'left':'240px'});
	$("#groen_twee").animate({'top':'360px'});
	

},
function () { 

    $("#oranje_een").animate({'left':'240px'});
	$("#oranje_twee").animate({'top':'120px'});
	
}); 


	
$("#ceremonie").toggle(
function () { 

	//ceremonie
 	$("#blauw_een").animate({'left':'0px'});
	$("#blauw_twee").animate({'top':'360px'});
	
	//casual
    $("#oranje_een").animate({'left':'240px'});
	$("#oranje_twee").animate({'top':'120px'});
	
	//schoenen
    $("#rood_een").animate({'left':'360px'});
	$("#rood_twee").animate({'top':'0px'});
	
	//ceremonie
 	//$("#blauw_een").animate({'left':'120px'});
	//$("#blauw_twee").animate({'top':'240px'});
	
	//communie
    $("#groen_een").animate({'left':'240px'});
	$("#groen_twee").animate({'top':'360px'});
	
},
function () { 

...