JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>
<div class="logo"></div>

CSS

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #000;
    margin: 0;
    padding: 0;
    color: #fff;
}

div{
    position:absolute;
}
ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    
    padding-right: 15px;
    padding-left: 15px; 
}
a img { 
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline; 
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position:absolute;
}

.content_left {
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background:#ccc;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    cursor:pointer;
}

.content_right {
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background:#fff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    cursor:pointer;
}

.logo {
    z-index:100;
    width:300px;
    height:230px;
    top:150px;
    left:50%;
    margin-left:-150px;
    background:#abc;
}

JavaScript

$("#left").mouseover(function(){
  $("#left").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#right").animate({
    width: "30%"
  }, 1500 );
});


$("#right").mouseover(function(){
  $("#right").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#left").animate({
    width: "30%"
  }, 1500 );
});