JSFiddle - React, Tailwind, and code Playground

by fainz777

HTML

<div class="map_wrapper">
    <a class="frag frag_1" href="#"></a>
    <a class="frag frag_2" href="#"></a>
    <a class="frag frag_3" href="#"></a>
    <a class="frag frag_4" href="#"></a>
    <a class="frag frag_5" href="#"></a>
    <a class="frag frag_6" href="#"></a>
    <a class="frag frag_7" href="#"></a>
    <a class="frag frag_8" href="#"></a>
    <a class="frag frag_9" href="#"></a>
    <a class="frag frag_10" href="#"></a>
    <a class="frag frag_11" href="#"></a>
    <a class="frag frag_12" href="#"></a>
    <a class="frag frag_13" href="#"></a>
    <a class="frag frag_14" href="#"></a>
    <a class="frag frag_15" href="#"></a>
    <a class="frag frag_16" href="#"></a>
    <a class="frag frag_17" href="#"></a>
    <a class="frag frag_18" href="#"></a>
    <a class="frag frag_19" href="#"></a>
    <a class="frag frag_20" href="#"></a>
</div>

CSS

.map_wrapper {
    width: 500px;
    height: 400px;  
    overflow: hidden;
}

.frag {
    width: 100px;
    height: 100px;
    float: left;
    background: url(http://www.astrolab.ru/cgi-bin/img.cgi?i=31000005.jpg&p=manager) no-repeat;
    opacity: 0.5;
}

.frag:hover {
    opacity: 1;
}

.frag_2 {background-position: -100px 0;}
.frag_3 {background-position: -200px 0;}
.frag_4 {background-position: -300px 0;}
.frag_5 {background-position: -400px 0;}

.frag_6 {background-position: 0 -100px;}
.frag_7 {background-position: -100px -100px;}
.frag_8 {background-position: -200px -100px;}
.frag_9 {background-position: -300px -100px;}
.frag_10 {background-position: -400px -100px;}

.frag_11 {background-position: 0 -200px;}
.frag_12 {background-position: -100px -200px;}
.frag_13 {background-position: -200px -200px;}
.frag_14 {background-position: -300px -200px;}
.frag_15 {background-position: -400px -200px;}

.frag_16 {background-position: 0 -300px;}
.frag_17 {background-position: -100px -300px;}
.frag_18 {background-position: -200px -300px;}
.frag_19 {background-position: -300px -300px;}
.frag_20 {background-position: -400px -300px;}