简单图片聚光灯效果

 body {
            background-color: #000;
        }
        
        .box {
            width: 440px;
            height: 440px;
            margin: 100px auto;
        }
        
        .img {
            float: left;
            width: 200px;
            height: 200px;
            border: 2px solid white;
        }
        
        .img img {
            width: 100%;
            height: 100%;
        }

    <script>
        $(function() {
            $(".img ").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.2)//其他兄弟透明度降低
            }, function() {
                $(".img").stop().fadeTo(100, 1)//离开后所有图片恢复
            })
        })
    </script>

    <div class="box">
        <div class="img"><img src="images/1.jpg" alt=""></div>
        <div class="img"><img src="images/2.jpg" alt=""></div>
        <div class="img"><img src="images/3.jpg" alt=""></div>
        <div class="img"><img src="images/4.jpg" alt=""></div>
    </div>