JSFiddle - React, Tailwind, and code Playground

by rabelais

HTML

<a href="chorus.html" id="chorus"></a>
<a href="chorus.html" id="chorus-text-link">Chorus 2014</a>

<a href="transmissions.html" id="transmissions"></a>
<a href="chorus.html" id="transmissions-text-link">Transmissions 2014</a>

<a href="yogurt-line.html" id="yogurt"></a>
<a href="chorus.html" id="yogurt-text-link">Yogurt line 2012</a>

CSS

#chorus
{
     background: url('http://georgewoolfe.com/new-website/images/images-3.jpeg');
    height: 85px;
    left: 30px;
    position: fixed;
    top: 78px;
    width: 113px;
    display: block;
}

#chorus:hover
{
    background: url('http://georgewoolfe.com/new-website/images/images-3copy.jpeg');
 border-bottom: none;
 
}
#chorus-text-link {
    left: 180px;
    position: fixed;
    top: 111px;
}
#transmissions
{
     background: url('http://georgewoolfe.com/new-website/images/images-23.jpeg');

    height: 85px;
    left: 30px;
    position: fixed;
    top: 178px;
    width: 113px;
    display: block;
}

#transmissions:hover
{
    background: url('http://georgewoolfe.com/new-website/images/images-23copy.jpeg');
 border-bottom: none;
 
}
#transmissions-text-link {
    left: 180px;
    position: fixed;
    top: 212px;
}
#yogurt
{
     background: url('http://georgewoolfe.com/new-website/images/images-2.jpeg');

    height: 85px;
    left: 30px;
    position: fixed;
    top: 278px;
    width: 113px;
    display: block;
}

#yogurt:hover
{
    background: url('http://georgewoolfe.com/new-website/images/images-2 copy.jpeg');
    border-bottom: none;
 
}
#yogurt-text-link {
    position: fixed;
    left: 180px;
    top: 308px;
}
a {
    text-decoration: none;
}
a:hover {
    border-bottom: 1px solid;
}
}