JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sprites</title>
    </head>
    
    <body>
        <section>
            <a id="sprite1" href="#">#1</a>
            <a id="sprite2" href="#">#2</a>
            <a id="sprite3" href="#">#3</a>
            <a id="sprite4" href="#">#4</a>
            <a id="sprite5" href="#">#5</a>
            <a id="sprite6" href="#">#6</a>
            <a id="sprite7" href="#">#7</a>
            <a id="sprite8" href="#">#8</a>

            <section id="sprite"></section>
        </section>
    </body>
</html>

CSS

@charset 'UTF-8' ;

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
    background-color: #efefef ; 
}

body > section {
    position: absolute ;
    top: 100px ;
    right: 100px ;
    bottom: 100px ;
    left: 100px ;
    min-width: 350px ;
    max-width: 1000px ;
    min-height: 200px ;
    max-height: 750px ;
    border: 1px solid #ddd ;
    border-radius: 10px ;
    background-color: #fff ;
}

section > a:first-child {
    margin-left: 20px ;
}

section > a {
    display: block ;
    float: left ;
    padding: 10px ;
    text-decoration: none ;
    color: #000 ;
}

section > a:hover {
    border-bottom: 1px dotted #bbb ;
    background-color: #eaeaea ; 
}

section > #sprite1:hover ~ #sprite { background-position: 0 0 ; }
section > #sprite2:hover ~ #sprite { background-position: 0 -750px ; }
section > #sprite3:hover ~ #sprite { background-position: 0 -1500px ; }
section > #sprite4:hover ~ #sprite { background-position: 0 -2250px ; }
section > #sprite5:hover ~ #sprite { background-position: 0 -3000px ; }
section > #sprite6:hover ~ #sprite { background-position: 0 -3750px ; }
section > #sprite7:hover ~ #sprite { background-position: 0 -4500px ; }
section > #sprite8:hover ~ #sprite { background-position: 0 -5250px ; }

section > #sprite {
    position: absolute ;
    top: 50px ;
    right: 50px ;
    bottom: 50px ;
    left: 50px ;;
    background: url( 'http://holzi0486.lima-city.de/00_sprite_forum.jpg' ) no-repeat 0 0 ;
}