JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
.sprite { display: block; 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">Link1<div>&nbsp;</div></a>
<a href=# class="sprite sp_ID2">Link2<div>&nbsp;</div></a>
<a href=# class="sprite sp_ID3">Link3<div>&nbsp;</div></a>
<a href=# class="sprite sp_ID4">Link4<div>&nbsp;</div></a>
<a href=# class="sprite sp_ID5">Link5<div>&nbsp;</div></a>
<a href=# class="sprite sp_ID6">Link6<div>&nbsp;</div></a>
</div>