JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="header">
    <div class="sidebar">
        <div class="button left top" id="box1">
            <div class="button-content">Box 1</div>
            <div class="bars"></div>
        </div>
        <div class="sidebar-spacer" ></div>
        <div class="button left bottom" id="box2">
            <div class="button-content">Box 2</div>
            <div class="bars"></div>
        </div>
    </div>
    <div id="center">
        <div id="center-content">
            <div class="content-container" id="content1"></div>
            <div class="content-container" id="content2"></div>
            <div class="content-container" id="content3"></div>
            <div class="content-container" id="content4"></div>
        </div>
    </div>
    <div class="sidebar">
        <div class="button right top" id="box3">
            <div class="button-content">Box 3</div>
            <div class="bars"></div>
        </div>
        <div class="sidebar-spacer" ></div>
        <div class="button right bottom" id="box4">
            <div class="button-content">Box 4</div>
            <div class="bars"></div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

#header {
    height: 300px;
    width: 600px;
    border: 1px solid black;
    overflow: hidden;
}

.sidebar {
    width: 25%;
    height: 100%;
    border: 1px dashed green;
    float:left;
}

#center {
    position:relative;
    float:left;
    width:50%;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    border: 1px dashed black;
}

#center-content {
    position:absolute;
    width: 80%;
    height: 100%;
    background-color: green;
}

.button {
    position:relative;
    width: 100%;
    height: 40%;
    border: 1px dashed pink;
    background-color: pink;
}

.sidebar-spacer {
    height:20%;
}

#box1 .button-content {
    background: url("http://placekitten.com/150/100");
}

#box2 .button-content {
    background: url("http://placekitten.com/100/100");
}

#box3 .button-content {
    background: url("http://placekitten.com/100/120");
}

#box4 .button-content {
    background: url("http://placekitten.com/90/130");
}

.bars {
    background-color: yellow;
    position: absolute;
    color: yellow;
    height:10px;
    width: 100%;
    z-index: 100;
}

.top .bars {
    top: 0px;
}

.bottom .bars {
    bottom: 0px;
}

.left .bars {
    left: 0px;
}

.right .bars {
    right: 0px;
}

.button-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow:hidden;
}

.content-container {
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height:100%;
    opacity: 0;
    z-index: -1;
}

#content1 {
    background: url("http://placekitten.com/200/300");
}

#content2 {
    background: url("http://placekitten.com/300/400");
}

#content3 {
    background: url("http://placekitten.com/250/300");
}

#content4 {
    background: url("http://placekitten.com/400/450");
}

JavaScript

$('.button').mouseenter(function() {
    var button = $(this);
    var bbar = $(button.find('.bars')[0]);
    var idx = button.prop('id').substr(button.prop('id').length - 1);
    var target = $('#content' + idx);
    bbar.animate({width: '285%'});
    target.css('zIndex', 50).animate({opacity: 1});
});

$('.button').mouseleave(function() {
    var button = $(this);
    var bbar = $(button.find('.bars')[0]);
    console.log(bbar);
    var idx = button.prop('id').substr(button.prop('id').length - 1);
    var target = $('#content' + idx);
    bbar.animate({width: '100%'});
    target.animate({opacity: 0}, function() { target.css('zIndex', -1)});
});