css or Jquery image gallery on hover increase image size and decrease size and rearrange other images

Problem

I am working on an image gallery that enlarges the hovered image. I need the images that are not being hovered on to resize and and rearrange themselves so they are visible around the image. I have tried jQuery but I cant figure out how to move the images over and resize them. I am happy to try css or jquery.

$(".picture").hover(function(){
$(this).animate({height: "500px",width: "500px" });
}, function() {
$(this).animate({ height: "200px", width: "200px" });
});

here is a link to the full project on my github

Problem courtesy of: ImJessW

Solution

why not just use css, so in class picture,

.picture{
     -webkit-transition: all 0.3s;
      moz-transition: all 0.3s;
      transition: all 0.3s;
      //set initial height and width here (this is important)
}
.picture:hover{
    height: 500px;
    width: 500px;
}
Solution courtesy of: Karl Michael Linantud

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.