JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<ul id="link-group">
    <li><a id="bg1" href="#">Background 1</a></li>
    
    <li><a id="bg2" href="#">Background 2</a></li>
    
    <li><a id="bg3" href="#">Background 3</a></li>
</ul>
<div id="wrapper-bg">

    <div id="bg1_ref" class="bg">
        
    </div>
    <div id="bg2_ref" class="bg">
        
    </div>
    <div id="bg3_ref" class="bg">
        
    </div>
<div>

CSS

li{
    display:inline-block;
    margin-right:20px;   
}

.bg {
    width:500px;
    height:500px;
    -webkit-transition: opacity 500ms linear;
}

.bg.hide {
    opacity: 0;
}
.bg.remove {
    display: none;
}


#bg1_ref{
  background: url(http://i261.photobucket.com/albums/ii57/MomsBestPhotos/DSCF3122.jpg)no-repeat;       
}
#bg2_ref{
 background: url(http://i1198.photobucket.com/albums/aa452/blackangus5/Merry-Christmas.jpg)no-repeat;   
}
#bg3_ref{
 background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Deserts/BadMoonRising.jpg)no-repeat;  
}

JavaScript

window.onload = init();

function init(){

    document.getElementById("link-group").onclick = handleClick;    
}

function handleClick(evt){

    var elem = document.getElementById(evt.target.id + "_ref");
    elem.classList.add("hide");
    
    setTimeout(
        function Remove() {
            elem.classList.add("remove");
        },
        500 );
}