JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <a href="one.html" id="link1">link1</a>
    <a href="two.html" id="link2">link2</a>
</div>
<div>
    <div class="div0" id="zero"></div>
    <div class="div1" id="one"></div>
    <div class="div2" id="two"></div>
</div>

CSS

.div0 {
    position: absolute;
    top: 30px;
    left: 0px;
    background-image: url(http://www.sanbarcomputing.com/images/js.jpg);
    background-size: 400px 400px;
    width: 400px;
    height: 400px;
    transition: 1s;
}
.div1 {
    position: absolute;
    top: 30px;
    left: 0px;
    background-image: url(http://www.sanbarcomputing.com/images/html5-logo.png);
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
    transition: 1s;
}
.div2 {
    position: absolute;
    top: 30px;
    left: 200px;
    background-image: url(http://www.sanbarcomputing.com/images/class-header-css3.jpg);
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
    transition: 1s;
}

JavaScript

(function () {
    var zeroEl = document.getElementById('zero'),
        oneEl = document.getElementById('one'),
        twoEl = document.getElementById('two'),
        link1El = document.getElementById('link1'),
        link2El = document.getElementById('link2');
    
    function mouseover (elem) {
        elem.style.opacity = '.2';
        zeroEl.style.opacity = '.2';
        
    }
    
    function mouseout (elem) {
        elem.style.opacity = '1';
        zeroEl.style.opacity = '1';
    }
    
    document.addEventListener('DOMContentLoaded', function () {
        link1El.addEventListener('mouseover', function () {
            mouseover(oneEl); }, false);
        link2El.addEventListener('mouseover', function () {
            mouseover(twoEl); }, false);
        link1El.addEventListener('mouseout', function() {
            mouseout(oneEl); }, false);
        link2El.addEventListener('mouseout', function () {
            mouseout(twoEl); }, false);
    }, false);
})();