Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Beer example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
	$(".glass").mouseenter(function(){
			$(".liquid").each(function() {
				$(this)
                    .css('visibility', 'visible')
					.data("origHeight", $(this).height())
					.height(0)
					.animate({
						height: $(this).data("origHeight")
					}, 1200);
			});
        $(this).unbind('mouseenter')
		});

}//]]>

</script>
<style>
.glass {
    height: 200px;
    position: relative;
    background-image: url('http://i40.tinypic.com/11hyr1j.png');
    /* Beer Glass */
    background-repeat: no-repeat;
}
.liquid {
    z-index:-1;
    position:absolute;
    bottom:0;
    width: 200px;
    background-image: url('http://i44.tinypic.com/f0vxbt.jpg');
    /* Beer Liquid Pattern */
    /* Remove the bottom two lines to stop animation */
    -webkit-animation: move 150s linear infinite;
    -moz-animation: move 150s linear infinite;
}
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2212px 0px;
    }
}
@-moz-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2212px 0px;
    }
}
</style>
</head>

<body>
<div class="glass"><span class="liquid" style="height: 30%;visibility:hidden;"></span>

</div>
</body>
</html>