Pixelate images when hovering over parent div using javascript <p>Searching around for ways to do this, I found a couple good explanations out there, and ended up combining them. I had everything working fine when I was just doing the hover effect when mousing over the image itself, but when trying to make it work when hovering over the "profile" div seems to have caused some problems. Currently, it will sometimes also be pixelated when not over the div, so it remains somewhere between the mouseover and mouseout states.</p> <h2>HTML</h2> <p>In the HTML, I'm creating a filterable directory of people using isotope that contains a bunch of blocks like this:</p> <pre><code>&lt;div class="item profile p-1 undergrad research"&gt; &lt;div class="profile-image"&gt; &lt;img src="img.jpg"&gt; &lt;/div&gt; &lt;div class="profile-text"&gt; &lt;h1&gt;Name&lt;/h1&gt; &lt;h2&gt;Position&lt;/h2&gt; &lt;p&gt; Email:email@gmail.com&lt;br&gt; Phone: 123.345.6567&lt;br&gt; Office: 2818 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h2>Javascript</h2> <p>I'm using javascript to handle the pixelation stuff right now, but to be honest I'm a lot more familiar and comfortable with Jquery, so this has been a struggle and learning experience. Below is the whole code, but I'll explain what I changed that started my issues.</p> <p>Originally, "items" in setup was taking <em>.profile-image</em> objects, and I changed that to <em>.profile</em> objects so I could use the ".profile" div as the object with the mouseover event listener. At this point I introduced <em>"block"</em>, which i switched the event listeners to from <em>"element"</em>. </p> <pre><code>// Most of the structure taken from Noel Delgado // @pixelia_me =&gt; http://codepen.io/noeldelgado/pen/FmEBh // The actual pixelation taken from Ken Fyrstenberg Nilsen // http://jsfiddle.net/AbdiasSoftware/QznT7/ // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ /* ** ======================================================================= ** Animation ** ======================================================================= */ var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function(){callback(currTime + timeToCall);}, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; /* ** ======================================================================= ** Pixelation ** ======================================================================= */ /*============================="Setup"===============================*/ var PIXELATION = 36,//The value when hovering. Lower numbers are more pixelated, while 100 is not at all speed = 4,//How quickly it animates. play = false;//Is the animation "playing"? var items = document.querySelectorAll('.profile'),//The parent of everything. _objs = [];//Array that will be filled with our images /*===================Images Object "Class Constructor"=====================*/ var Images = function( block, element, image, canvas, context ) { this.block = block; this.element = element; this.image = image; this.canvas = canvas; this.context = context; this.pixelation = 100; } //Called by Array.prototype.slice Images.prototype.bindLoad = function() { var obj = this; this.image.onload = function() { obj.reportLoad.call(obj); }; if ( this.image.complete ) { this.image.onload(); } } //Called by Images.prototype.bindLoad Images.prototype.reportLoad = function() { var obj = this; size = (play ? v : 100) * 0.01, w = this.width * size; h = this.height * size; this.imageWidth = this.canvas.width = this.image.width; this.imageHeight = this.canvas.height = this.image.height; this.context.drawImage(this.image, 0, 0, w, h); this.context.drawImage(this.image, 0, 0, w, h, 0, 0, this.element.width, this.element.height); //Turn off image smoothing so we get the pixelated effect this.context.mozImageSmoothingEnabled = false; this.context.webkitImageSmoothingEnabled = false; this.context.imageSmoothingEnabled = false; this.block.addEventListener('mouseover', function() { obj.mouseOver(); }, false); this.block.addEventListener('mouseout', function() { obj.mouseOut(); }, false); } /*=====================Images Object MouseOver Function======================*/ Images.prototype.mouseOver = function() { var obj = this, play = true; cancelAnimationFrame( obj.idUndraw ); var draw = function() { if ( obj.pixelation &lt;= PIXELATION ) { play = false; cancelAnimationFrame( obj.idDraw ); obj.pixelation = PIXELATION; } else { obj.pixelate( obj.imageWidth, obj.imageHeight, 0, 0 ); obj.idDraw = requestAnimationFrame( draw, obj.context ); } }; obj.idDraw = requestAnimationFrame( draw, obj.context ); } /*====================Images Object MouseOut Function==================*/ Images.prototype.mouseOut = function() { var obj = this, play = true; cancelAnimationFrame( obj.idDraw ); var undraw = function() { if ( obj.pixelation &gt; 98 ) { //New Code play = false;//New Code cancelAnimationFrame( obj.idUndraw ); obj.pixelation = 98; } else { obj.depixelate( obj.imageWidth, obj.imageHeight, 0, 0 ); obj.idUndraw = requestAnimationFrame( undraw, obj.context ); } }; obj.idUndraw = requestAnimationFrame( undraw, obj.context ); } /*=================Images Object Pixelation Calculation===================*/ //Called by Images.prototype.pixelate &amp; depixelate Images.prototype.setPixels = function() { size = this.pixelation * 0.01; w = this.image.width * size; h = this.image.height * size; this.context.drawImage(this.image, 0, 0, w, h); this.context.drawImage(this.canvas, 0, 0, w, h, 0, 0, this.canvas.width, this.canvas.height); } /*====================Images Object Pixelation Methods=====================*/ //Called by Images.prototype.mouseOver Images.prototype.pixelate = function() { this.pixelation -= speed; this.setPixels(); } //Called by Images.prototype.mouseOut (Line 113) Images.prototype.depixelate = function() { this.pixelation += speed; this.setPixels(); } /*=============================Create Array of images=====================*/ //It all seems to start here. Don't really know how this gets called //though unfortunately... Array.prototype.slice.call(items, 0).forEach(function(el, i) { var block = el, element = el.querySelector('.profile-image'), image = element.querySelector('img'), canvas = document.createElement('canvas'), context = canvas.getContext('2d'); element.appendChild( canvas ); _objs.push( new Images( block, element, image, canvas, context ) ); _objs[i].bindLoad(); }); </code></pre>