karssen,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
#wrapper{
width:400px;
margin:0 auto;
position:relative;
}
.vertical1 {
width:400px;
height:200px;
background-color:red;
position:absolute;
background-image: url(http://javascript.ru/img/ws_1.png);
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}
.vertical2 {
width:400px;
height:200px;
background-color:blue;
position:absolute;
right: 0;
background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
.separator{
width:5px;
height:200px;
background-color:black;
position:absolute;
z-index:2;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
window.onload=function(){
$(document).ready(function(){
$('#wrapper').mousemove(function(e){
var sep = $(this).children('.separator');
var left = $('#wrapper').offset().left;
var top = $('#wrapper').offset().top;
if(e.clientX >= left && e.clientX <= (left + 395)){
sep.offset({top:top, left:e.clientX});
var a = 400 - (e.clientX - left)
$('.vertical2').width(a)
}
});
})
}
</script>
</head>
<body>
<div id="wrapper">
<div class='vertical1'>
</div>
<div class='vertical2'>
</div>
<div class="separator">
</div>
</div>
</body>
</html>