悬停时的 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;
}