JSFiddle - React, Tailwind, and code Playground

by meetravi

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 class="bg1">
        
    </div>
    <div class="bg2" style="display:none">
        
    </div>
    <div class="bg3" style="display:none">
        
    </div>
<div>

CSS

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

.bg1{
    
 width:500px;
height:500px;
 background: url(http://i261.photobucket.com/albums/ii57/MomsBestPhotos/DSCF3122.jpg)no-repeat;   
    
}.bg2{
    
 width:500px;
height:500px;
 background: url(http://i1198.photobucket.com/albums/aa452/blackangus5/Merry-Christmas.jpg)no-repeat;   
    
}
.bg3{
    
 width:500px;
height:500px;
 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 element = document.getElementsByClassName(evt.target.id);
            fade(element);
        
        }
                                                  
                                                  
function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}