JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img id="bg" src="http://whine.dk/skovtrup/images/bee.jpg">
<a href="http://whine.dk/skovtrup/?side=Robinie" class="selector" style="background-image: url('http://whine.dk/skovtrup/images/3.jpg');text-decoration:none;color:white;font-weight:bold;" alt="http://whine.dk/skovtrup/images/bg.jpg">
<div class="squareDiv"></div><div class="squareDivText">12351211</div></a>
<a href="http://whine.dk/skovtrup/?side=plankegulve" class="selector" style="background-image: url('http://whine.dk/skovtrup/images/bg2.jpg');text-decoration:none;color:white;font-weight:bold;" alt="http://whine.dk/skovtrup/images/bee.jpg">
<div class="squareDiv"></div><div class="squareDivText">Her er lidt om plankegulve-siden</div></a>
<a href="http://whine.dk/skovtrup/?side=" class="selector" style="background-image: url('http://whine.dk/skovtrup/images/solsejl.png');text-decoration:none;color:white;font-weight:bold;" alt="http://whine.dk/skovtrup/images/solsejlbaggrund.jpg">
<div class="squareDiv"></div><div class="squareDivText">Solsejl.info har information om solsejl.</div></a>

CSS

#bg 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-1;
}
.bgwidth 
{ 
    width: 100%; 
}
.bgheight 
{ 
    height: 100%; 
}
.selector
{
    width: 304px;
    height: 160px;
    float: left;
    text-decoration: none;
    margin-left: 10px;
    margin-top: 10px;
}
.squareDiv
{
    margin-top:120px;
    height:40px;
    width:304px;
    background-color:orange; 
    opacity:0.6; 
    filter:alpha(opacity=60);
}
.squareDivText
{
    margin-top:-40px;
    position:absolute;
    z-index:2;
}

JavaScript

$(function() {
    var theWindow = $(window),
        $bg = $("#bg"),
        aspectRatio = $bg.width() / $bg.height();

    function resizeBg() {
        if ((theWindow.width() / theWindow.height()) < aspectRatio) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }
    }
    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");
});

//<![CDATA[ 
$(window).load(function() {
    $('.selector').hover(function() {
        var img = document.createElement('img');
        img.src = $(this).attr('alt');
        img.onload = function() {
            $('#bg').fadeOut(function() {
                $(this).setAttribute('src', img.src).fadeIn();
            });
        };
        return false;
    });
});
//]]>