А че должны получить в итоге? Это?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="red">
<style>
#postcards{
height: 275px;
width: 340px;
background-color: black;
position: absolute; left: 220px;top:337px;"
}
#postcards1,#postcards2,#postcards3,#postcards4{
background-color: #62b2ff;
text-align: center;
}
</style>
<div id="postcards">
<div id="postcards1" style=" position:absolute; left: 0px; top: 0px; height:137px;width: 170px;"></div>
<div id="postcards2" style=" position:absolute; left: 0px; top: 137px;height:137px;width: 170px;"></div>
<div id="postcards3" style=" position:absolute; left: 170px; top: 0px;height:137px;width: 170px;"></div>
<div id="postcards4" style=" position:absolute; left: 170px; top: 137px;height:137px;width: 170px;"></div>
</div>
<script>
var container = document.getElementById('postcards');
var items = container.getElementsByTagName('*');
container.onmouseover = function(event) {
var height = parseInt(items[0].style.height);
(function(){
height -= 1;
if (height > 10) {
for (var i = 0; i < items.length; i ++) {
items[i].style.height = height + 'px';
}
setTimeout(arguments.callee, 100);
}
})();
container.onmouseover = null;
}
</script>
</body>
</html>