Divs resize and overlay jquery

Question

i created a container with 4 divs. I need that on hover the div change is size and overlay the other divs.

Here a demo http://jsbin.com/ecuzof/113/edit

The problem: i want the bottom divs to grow from bottom to top instead from top to bottom like now.

Is it possible? Thanks G.

Answer 1

Working Example

You can set the bottom to 0 and the div's will then animate from the bottom, up. Also, notice that I have created two events - one for the top divs and one for the bottom set.

$(".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'});
});