<section class="section HomeSection" id="blendeffect">
    <div class="container-fluid px-0">
        <div class="row g-0">
            <div class="col">
                <div class="bannerimg img1"></div>                
            </div>
            <div class="col">
                <div class="bannerimg img2"></div>                
            </div>
            <div class="col">
                <div class="bannerimg img3"></div>                
            </div>
            <div class="col">
                <div class="bannerimg img4"></div>                
            </div>
        </div>
    </div>
</section>

.HomeSection{
    background: url('https://photographycourse.net/wp-content/uploads/2020/02/Portrait-vs-Landscape-Featured-Image-3.jpg') no-repeat center center / cover;
}
.bannerimg{
    height: 100vh;
    mix-blend-mode: color;
    opacity: 1;
}
.img1{
    background-position: 0% 0%;
    background-color: #0288d1;
}
.img2{
    background-position: 20% 0%;
    background-color: #009688;
}
.img3{
    background-position: 40% 0%;
    background-color: #ffca28;
}
.img4{
    background-position: 60% 0%;
    background-color: #f06292;
}

#blendeffect.wiggle .bannerimg{
    opacity: 0;
}

// setInterval(function(){ 
//    // toggle the class every five second
//    $('#blendeffect').toggleClass('wiggle');  
//    setTimeout(function(){
//      // toggle back after 1 second
//      $('#blendeffect').toggleClass('wiggle');  
//    },1000);

// },2000);