Javascript 如何制作具有缩放选定图像和其他图像效果的图像库

到目前为止，我的javascript代码：

$(document).ready(function(){
 $('.img1').mouseover(function(){
    /*  $('.img1').css({ "-webkit-transform ": "scale(2)",
                            "-moz-transform": "scale(2)",
                            "-o-transform": "scale(2)",
                            "transform": "scale(2)"
                        });   */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeOut(2500);
     $('.img1').mouseout(function(){
     /* $('.img1').css({"-webkit-transform ": "scale(1)",
                            "-moz-transform": "scale(1)",
                            "-o-transform": "scale(1)",
                            "transform": "scale(1)"});  */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeIn(2500);
     });
});

这是我第一张图片的代码

---

我想要实现的是，当我悬停在一个图像上时，所有其他图像都应该分散。

尝试元素的公共类
每个元素都有不同的ID

---

在类中应用效果并应用悬停元素的效果id

我更喜欢纯css，它更直接。播放

：悬停
选择器：

.container:hover > div
.container > div:hover

（我只为webkit编写，但您可以添加更多浏览器支持）