JSFiddle - React, Tailwind, and code Playground

HTML

<script src="testarama.webege.com/leaflet.js"></script>
<script src="testarama.webege.com/wax.leaf.js"></script>
<body>
    <bound>
        <div class="main_box">
            <p>This is a background link <a rel="green">that turns green</a>.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
            <p>This is another background link <a rel="green">that turns green</a>.</p>
            <footer />
        </div>
    </bound>
</body>

</html>

CSS

.main_box {
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
    z-index: auto;
}
.main_box:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 110%;
    z-index: -9;
    opacity: 0;
    transition: opacity 1s;
    margin-left: -30px;
    margin-right: -30px;
    background-origin: border-box;
    background-size: cover;
    background-color: green;
    background-clip: border-box;
}

.main_box.active:after {
    opacity: 1;
}

.green:after {
        background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');}


/*** background tester ***/
 * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body {
    height: 100%;
}
/* Main */
 body {
    text-align: center;
    color: white;
    font-family: Georgia, Garamond, Baskerville, serif;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0 30px;
    background: url('http://s17.postimg.org/5h4bsauzz/red.jpg') center center #222;
    background-size: cover;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
flashers {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
}
::selection {
    background: rgba(255, 255, 255, 0.7);
}
/* Backgrounds */
 @media only screen and (min-width: 640px) {
    flashers.on {
        opacity: 1;
    }
    flashers.green {
        background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
    }
}
/* Content etc. */
 bound {
    width: 100%;
    height: 100%;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-pack: center;
    -webkit-box-pack:...

JavaScript

$('p a').hover(
                    function() {
                        $('body').addClass('hover_on');
                        $('.main_box').addClass('active');
                        $('.main_box').addClass('green');
                    },

                    function() {
                        $('body').removeClass('hover_on');
                        $('.main_box').removeClass('active');
                        $('.main_box').removeClass('green');
                    }
                );