JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
.sprite { float:left; clear:left; margin-bottom: 5px; }
.container, .sp_ID0, .sprite div { width: 600px; height: 203px; }
.sp_ID0, .sprite:hover div {
  background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg); 
  background-repeat: no-repeat; }
.container  { position:relative; } 
.sp_ID0 { z-index: -2; } 
.sprite div { display: none; z-index: -1; } 
.sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; } 
.sp_ID1 div { background-position: 0px -203px; } 
.sp_ID2 div { background-position: 0px -406px; } 
.sp_ID3 div { background-position: 0px -609px; } 
.sp_ID4 div { background-position: 0px -812px; } 
.sp_ID5 div { background-position: 0px -203px; } 
.sp_ID6 div { background-position: 0px -406px; } 
</style>

<div class="container">
<div class="sp_ID0">&nbsp;</div>
    <a href=# class="sprite sp_ID1"><font color="white">Link1</font><div>&nbsp;</div></a>
<a href=# class="sprite sp_ID2"><font color="white">Link2</font><div>&nbsp;</div></a>
<a href=# class="sprite sp_ID3"><font color="white">Link3</font><div>&nbsp;</div></a>
<a href=# class="sprite sp_ID4"><font color="white">Link4</font><div>&nbsp;</div></a>
<a href=# class="sprite sp_ID5"><font color="white">Link5</font><div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID6"><font color="white">Link6</font><div>&nbsp;</div></a>
</div>