<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>

body { overflow:hidden; } .left, .right{ position:absolute; top:0; left:50%; width:2%; height:100%; background:#f33; transition:all ease-out 0.8s; } .right { left:auto; right:50%; background:#333; } .wrapper { transition:all ease-out 0.8s; } .wrapper:hover .left, .wrapper:hover .right { width:50%; transition:all ease-out 0.8s; transform-origin:50% 50%; transform:rotateZ(180deg); }