Hi,

On my page there are four columns of images. please see http://i-n-t-e-l-l-i-g-e-n-t-s-i-a.com/entry.html

There is some jquery (which is commented out at the bottom of the html, see script below also) that converts all images to black and white and when you hover they fade to colour, which is what i am trying to apply to these images. however when i do apply it it totally changed my css. Dow anyone know how I get this to work on my page?

$(window).load(function(){

$(".wrapper img").fadeIn(500);

$('.wrapper img').each(function(){

var el = $(this);

el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

var el = $(this);

el.parent().css({"width":this.width,"height":this.height});

el.dequeue();

});

this.src = grayscale(this.src);

});

$('.wrapper img').mouseover(function(){

$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);

})

$('.img_grayscale').mouseout(function(){

$(this).stop().animate({opacity:0}, 1000);

});

});

 function grayscale(src){

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var imgObj = new Image();

imgObj.src = src;

canvas.width = imgObj.width;

canvas.height = imgObj.height; 

ctx.drawImage(imgObj, 0, 0); 

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

for(var y = 0; y < imgPixels.height; y++){

for(var x = 0; x < imgPixels.width; x++){

var i = (y * 4) * imgPixels.width + x * 4;

var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

imgPixels.data[i] = avg; 

imgPixels.data[i + 1] = avg; 

imgPixels.data[i + 2] = avg;

}

}

ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

    }

Also is it possible to apply it to each column as a whole rather then the indiviual images, so the whole column (div) of imgs changes to color when mouse enters the div? 

Really would appreciate any help. Thanks 

Baselitz