Divs resize и overlay jquery

Question

Я создал контейнер с 4 divs. Мне нужно, чтобы при наведении изменение div было размером и перекрывало другие div.

Вот демо http://jsbin.com/ecuzof/113/edit

Проблема: я хочу, чтобы нижние дивы расти снизу вверх, а не сверху вниз, как сейчас.

Возможно ли это? Благодаря Г.

Answer 1

Working Example

Вы можете установить bottom в 0 и DIV-х будет анимировать снизу, вверх. Также обратите внимание, что я создал два события: один для верхних div и один для нижнего набора.

$(".riga .hoverific").hover(function() { 
    $(this).stop().animate({ 
    width: "70%", 
    height: "70%", 
    backgroundColor: "lightBlue" 
    }).css({'z-index':'3'}); 
}, function() { 
    $(this).stop().animate({ 
    width: "50%", 
    height: "50%", 
    backgroundColor: "silver" 
    }).css({'z-index':'1'}); 
}); 


$(".riga2 .hoverific").hover(function() { 
    $(this).stop().animate({ 
    width: "70%", 
    height: "70%", 
    bottom: "0%", 
    backgroundColor: "lightBlue" 
    }).css({'z-index':'3'}); 
}, function() { 
    $(this).stop().animate({ 
    width: "50%", 
    height: "50%", 
    backgroundColor: "silver" 
    }).css({'z-index':'1'}); 
});