<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="top"></div>
<div class="line"><p class="caption" style="font-size: 10px; top: -30px; position:relative; text-align: center; opacity: 0.5">pull me up</p></div>
<div class="bottom"><p></p></div>
</div>
<!--<button>Position</button>-->
.html, body {
font-family: 'Open Sans', sans-serif;
background: black;
}
.line {
cursor: pointer;
position: absolute;
width: 640px;
height: 1px;
background: black;
z-index: 10;
top: 100%;
}
.container {
position: absolute;
color: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; background:url('https://farm8.staticflickr.com/7475/27329811434_cd8cd9b669_b.jpg');
background-size: 640px 360px;
background-position: 0 -5px;
width: 640px;
height: 355px;
overflow: hidden;
}
.top {
position:absolute;
width: 640px;
height: 100%;
}
.bottom {
position:absolute;
width: 640px;
bottom: 0px;
height: 0px;
overflow: hidden;
}
.top p, .bottom p {
position: relative;
vertical-align: middle;
}
.bottom > p {
width: 640px;
height: 360px;
margin: 0px;
position: absolute;
bottom: 0px;
overflow: hidden;
background: url('https://farm8.staticflickr.com/7324/27329811284_21e47c3355_b.jpg');
background-size: 640px 360px;
background-position: 0 0px;
background-repeat: no-repeat;
}
$(".line").draggable({
axis: "y",
containment: "parent",
drag: function() {
$(".top").height($(".line").position().top);
$(".bottom").height($(".container").height()-$(".top").height());
}
});
//alert($(".line").height());
$("button").click(function() {
var ratio = $(".top").height/$(".bottom").height+0.1;
//alert(ratio);
});