JSFiddle - React, Tailwind, and code Playground

by cleaver

HTML

<div class="wrapper-div">
    <div class="noise"></div>
    <img class="moon-img" src="http://www.wallsave.com/wallpapers/1280x1024/moonlight/60768/moonlight-60768.jpg"/>
</div>

CSS

.moon-img {
    width:500px;
     z-index:-999;
}

.wrapper-div {
    margin: 30px 0px 0px 30px;
    float:left;
    overflow:hidden;
}

.noise {
    position:absolute;
    width:500px;
    height:400px;
    background-color:#555;
    opacity:0.2
}

JavaScript

$(document).ready(function(){
    
    var shades = new Array('#000000','#030303','#050505','#080808','#111111','#141414','#181818','#222222');

    function alter_noise() {
        $('.noise').css('background-color', shades[Math.floor(Math.random()*shades.length)]); // varying colour
        $('.noise').css('opacity', '0.2' + (1 + Math.floor(Math.random() * 3))); // varying opacity
        
        setTimeout(alter_noise, 50 + Math.floor(Math.random() * 100)); // varying update time
    }
    
    alter_noise();
});