Crazy hover-slider

dabblet.css

/* Crazy hover-slider */
a {
    position: relative;
    display: block;
    border-radius: 5px;
    width: 290px;
    height: 32px;
    margin-top: 64px;
    background: #4c4c4c; /* Old browsers */
    background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
    box-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 1pxrgba(128,128,128,.5);
}

span {
    float: left;
    height: 30px;
    width: 32px;
    margin: 1px -31px 1px 1px;
    border-radius: 4px;
    background: #cedbe9; /* Old browsers */
    background: linear-gradient(top, #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* W3C */
    box-shadow: inset 0 0 4px rgba(0,0,0,.3);
    opacity: 0;
}

a:hover {
    z-index: 9;
}

span:first-child, span:hover {
 opacity: 1;
}

a:hover > span:first-child:not(:hover) {
 opacity: 0;   
}

sub {
    display: none;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    text-align: center;
    font: bold 5em/3 sans-serif;

    background: #fff;
}

sub:before {
    content: 'Unlocked!';
}

sub:hover,
span:nth-last-of-type(-n+2):hover ~ sub {
    display: block;
}

sup {
    position: absolute;
    z-index: 9;
    
    width: 258px;
    height: 32px;
    margin: 0 0 0 33px;
}

dabblet.html

<sup></sup>
<a href="#" draggable="false">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span tabindex="1"></span>
    <sub></sub>
</a>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}