懸停CSS或JQuery圖像庫增加圖像大小和減小大小，並重新排列其他圖像

Question

我正在擴大圖像的圖像庫。我需要沒有被徘徊的圖像來調整大小，並重新排列自己，以便在圖像周圍可以看到它們。我試過jQuery，但我無法弄清楚如何移動圖像並調整它們的大小。我很高興嘗試CSS或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

Answer 1

爲什麼不使用CSS，所以在班級合影，

.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; 
}