Image overlay CSS

by vijayweb

HTML

<canvas id='canvas' style='background:url(https://unsplash.it/900/600) no-repeat;'></canvas>
  <div id='container'></div>

 <div id="slider"></div>

CSS

#slider {
    width: 15px;
}

#container{
   width: 400px;
  height:300px;
}


#container{
  postion:absolute;
}

#canvas{
  position:relative;
}

JavaScript

$(document).ready(function () {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: 1,
            orientation: "vertical",
            slide: function (e, ui) {
//                $('#box').css('opacity', ui.value)
                 $("#container").css("background-color", "rgba(255,0,0,"+ui.value+")");

            }
        })
    });