JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Cuprum:400,700&amp;subset=latin,cyrillic-ext"></script>
<p src="http://images.t-nation.com/forum_images/8/2/821764.1132188414706.bwbeauty.jpg"></p>
<div class="left_part">
    <div class="l_abs">sda</div>
</div>
<div class="right_part">
    <div class="r_abs">adsad</div>
</div>

CSS

* {
    padding:0;
    margin:0;
    outline:none;
}
body {
    background:#f4f4f4;
    font-family:'Cuprum', sans-serif;
    font-size:62.5%;
}
.left_part, .right_part {
    position:relative;
    float:left;
    width:200px;
    min-height:150px;
}

.l_abs, .r_abs {
    position:absolute;
    height:100%;
    width:100%;

    z-index:10;
}
.l_abs {
    left:0;
    background:red;
}
.r_abs {
    right:0;
    background:blue;
}
.zindex {
    z-index:1000!Important;
}

JavaScript

$('.l_abs, .r_abs').hover(function () {
    $(this).addClass('zindex').animate({
        width: '200%'
    });

}, function () {
    $(this).animate({ width: '100%'}, function(){
        $(this).removeClass('zindex');
    });
});