JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div class="container">
    <a href="#" class="sprite sp_ID1">Link 1</a>
    <a href="#" class="sprite sp_ID2">Link 2</a>
    <a href="#" class="sprite sp_ID3">Link 3</a>
    <a href="#" class="sprite sp_ID4">Link 4</a>
    <a href="#" class="sprite sp_ID5">Link 5</a>
    <a href="#" class="sprite sp_ID6">Link 6</a>
    
    <div class="sp_ID0"></div>
</div>

CSS

.sprite { 
    display: block; 
    margin-bottom: 5px;
    float: left;
    clear: both;
    color: white;
}

.container, .sp_ID0 { 
    width: 600px; 
    height: 203px; 
}
.sp_ID0 {
    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; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block;
}

.sp_ID1:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID2:hover ~ .sp_ID0 { background-position: 0px -406px; }
.sp_ID3:hover ~ .sp_ID0 { background-position: 0px -609px; }
.sp_ID4:hover ~ .sp_ID0 { background-position: 0px -812px; }
.sp_ID5:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID6:hover ~ .sp_ID0 { background-position: 0px -406px; }