随机覆盖网格渐变opacity

 

 

body{width: 100vh;height: 100vh;background: #222;}
.image-container{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width:1200px;height:400px;overflow:hidden;box-shadow:0 0 20px rgba(0,0,0,0.5);background:#111;}
.image-container img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index:-1;}
.image-container span{float:left;width:200px;height:200px;background:#000;z-index:5;box-sizing:border-box;opacity:1;}

<div class="image-container">
  <img src="../images/city.jpg" alt="">
</div>

    for(var i=0;i<12;i++){
        $(".image-container").append("<span></span>");
        $('.image-container span').each(function(i){
            var $self = $(this);
            var $randomNumber = Math.random() * 800;
            function loop(){
                $self.animate({
                    'opacity' : 0.5 * Math.random()
                }, 3000, loop);
            }
            setTimeout(function(){
                loop();
            }, $randomNumber);
        });
    }