JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div id="container">
        <div id="header">
            <div id="header_title">
                <div>click here</div>
            </div>
       </div>
        <span id="hoverText">test box</span>
 </div>

CSS

body{
    color: #990000;    
    overflow:hidden;
}

#container{
    background-color:#000;
    width:100%;
    height:100%;
    text-align:center;
    position:absolute;
    top:0px;
    left:0px;
}

#header{
    background-image:url(http://test.gianlucaugolini.it/images/header-FULLHD.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    width:100%;
    height:45%;
    position:absolute;
    top:0px;
    left:0px;
    border-bottom:3px solid black;
    z-index:999;
}

#header_title{
    background-color: #333333;
    top: 25%;
    height: 20%;
    left: 30%;
    position: absolute;
    width: 40%;
    cursor:pointer;
}

#header_title div{
    position: absolute;
    color:#FFF;
    width: 100%;
    height:100%;
    font-size:inherit;
    cursor:pointer;
}

#top_menu {
    background-color: #333333;
    height: auto;
    left: 20%;
    top:70%;
    position: absolute;
    width: 60%;
}

#top_menu ul li{
    display:inline;
}

#top_menu ul{
    padding:0;
    margin:0;
}

#top_menu li{
    cursor:pointer;
    margin:0px 50px 0px 50px;
}

#top_menu_item{
    height: 100%;
}

#content{
    background-image: url(http://test.gianlucaugolini.it/images/background-FULLHD.png);
       background-size:100% 100%;
    background-repeat:no-repeat;
    height: 50%;
    right: 0;
    position: absolute;
    width: 100%;
    bottom:5%;
    z-index:99;
}

#content_body p{
    height: 100%;
    margin: auto 0px auto auto;
    overflow: auto;
    position: relative;
    top: 0;
    width: 95%;
    z-index: 9;
}

#menu_container {
    border: 1px solid black;
    height: 96%;
    left: 20%;
    margin: auto;
    padding: 5px;
    position: absolute;
    top: 1%;
    width: 60%;
}

#menu_container .menuItem{
    float:left;
    position:relative;
    width:20%;
    height:auto;
    margin-left:4%;
    top:15%;
}

#menu_container .menuItemImg{
    cursor:pointer;
    width:80%;
    height:80%;
    position:relative;
    z-index:9;
}

.menuItemText{
   ...

JavaScript

$(document).ready(function() {
    $("#header_title").bind("click",test);
});

function test(){
    var cw = $("#container").width();
    var scaleX = cw/2 + $("#hoverText").width()/2;  
    
    $("#hoverText").css("left", cw).animate({
        visibility:"visible",
        opacity:"show",
        left:"-="+scaleX+"px"
    }, 500, function() {
        $(this).effect("highlight",{
            duration:1000
        },1500,function() {
            $(this).animate({
                visibility:"hidden",
                opacity:"hide",
                left: 0
            }, 500);
        });
    });
}