using jscript to create greyscale to colour effect on images

Question

I am using the following technique to make my images go from greyscale to colour on hover: http://solemone.de/code/code-examples/demos-grayscale-hover-effect-with-html5-canvas-and-jquery/

The only issue I'm having is that when I hover the image it goes back to the original size instead of fitting in the the sytle width it has been set to.

jscript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
    $(window).load(function() {
        $('.imglist img').each(function() {
            $(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css('position', 'absolute').insertBefore(this);
            this.src = grayscale(this.src);
        }).animate({opacity: 1}, 500);
    });

    $(document).ready(function() {

        $("#imglist1 a").hover(
            function() {
                $(this).find('.gotcolors').stop().animate({opacity: 1}, 200);
            }, 
            function() {
                $(this).find('.gotcolors').stop().animate({opacity: 0}, 500);
            }
        );


    });


    function grayscale(src) {
        var supportsCanvas = !!document.createElement('canvas').getContext;
        if (supportsCanvas) {
            var canvas = document.createElement('canvas'), 
            context = canvas.getContext('2d'), 
            imageData, px, length, i = 0, gray, 
            img = new Image();

            img.src = src;
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0);

            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            px = imageData.data;
            length = px.length;

            for (; i < length; i += 4) {
                gray = px[i] * .3 + px[i + 1] * .59 + px[i + 2] * .11;
                px[i] = px[i + 1] = px[i + 2] = gray;
            }

            context.putImageData(imageData, 0, 0);
            return canvas.toDataURL();
        } else {
            return src;
        }
    }


    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function(callback, element) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();
</script>

cs code:

.imglist {
    margin:0;
    padding:0;
    list-style:none;
    margin:0 0 0 -15px;
    width:100%;
    display:block;
}
    .imglist li {
        margin: 0 0 0 15px;
        float: left;
    }
        .imglist { display:block }
        .imglist img { opacity:0; }

html code:

<li><a title="It's Me!"><img src="images/profile.jpeg" alt="Profile Picture" style="width:100%;"></a></li>

Any help or advice is welcome. Maybe there is a better and easier way of doing this? I originally tried doing it with css but didn't have much luck. Thanks.

Answer 1

Why don't you use CSS3? You can use a grey-scale filter with an animation on the hover like this (source):

.animated-grayscale { 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.animated-greyscale:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter: none;
}

This removes the greyscale on the hover, as you've requested in the original question. Here's the fiddle - http://jsfiddle.net/j0wm1oj5/