Caman hover states

caman-hover

var imgArray = $('.projects-cluster img');
var size = imgArray.length;
var canvasArray = [];

// loop through images, render them to canvas on document ready (user won't notice)
imgArray.each( function(index, value) {
   Caman(this, function () {
      this.render( function() {
         // once all images are rendered to canvas, fire the doCaman() function
         if (index == size - 1) { 
            doCaman(); 
         }

      });

   });

});

// hover states on rendered canvas objects
function doCaman() {
   
   $('.projects-cluster canvas').each( function(index, value) {

      $(this).hover( function() {
         
         Caman(this, function () {

            this.greyscale();
            this.exposure(30);
            this.colorize('#FF8080', 50);
            this.render();

         });

      }, function() {
         Caman(this, function () {

            this.revert();
            
         });

      });

   });

}