hello there…awesome tuts. can i re-post on my blog in my language? will credit to you

Doesn’t work on latest Chrome 10.0.634.0/Win7. Images don’t show up until you hover on them.

Thank you!!!! I was just looking for an effect like this to use in my soon-to-be-redesigned portfolio!!

Thank you thank you thank you! Exactly what I was after! :)

Nice article and thanks for sharing!

On mouseover and mouseout events, maybe the animate duration value should be decreased a bit?

This way you won’t have to wait so much (1000ms) to see the effect.

That looks useful and the transition isn’t jarring.

Thanks for this! I have just the use for it. :)

“Works great on my XP / Chrome 8.0.552.237”
Great sense of humor!

Nice technique! But for less lines i might still do this with a simple sprite with b&w version / color version and a bit of CSS.

Really great technique. Thanks for sharing!

@Olli – It is possible with less lines but not only would it be more tedious creating the sprites in comparison to a single color image, the accumulated file sizes for the images would be greater than the technique used here. Basically, it would result in a higher file size over line count, impacting — though minimal — page load times.

nice

Nice effect. Would be cool to if grayscale was applied to images before they were shown.

Nice cant’t believe i have only just found this amazing site i like all your posts

Works really nice on my Firefox 3.6 MAC .. lovely demo

That is cool man, really loved it.
thanks a ton for the tut ! ;)

I love the effect.
&Would definitely love to use it.
How ever, I’m not too familiar with javascript.
I’m using my offline xampp blog, and tried to add the script before the wp_head function…but it still doesn’t work.
the tutorial says use a copy of jquery…
i’m not sure if that means copy and pasty the jquery.js in the same folder or not?
Please help, cause I really really want to use this wonderful script :)

This is awesome, I was trying to do something like this using timThumb all last summer. Much easier and effective, thanks for sharing.

Woow! Amazing technique for image galleries! ;)

Amazing canvas technique.

But I would recommend to replace jQuery with CSS3 Transition method – so the post title may “Greyscale Image hover using HTML5 and CSS3”. Ofcourse, its not crossbrowser compatible, but yes its an experiment :)

think this could be tweaked to to show a sepia preview on a photographers’ proofing site?

Very awesome effect, i’m use it on my sites, txh WebDesignerWall & Darcy Clarke

There is a filter for IE that makes grayscale:

function grayscaleImageIE(imgObj)
{
imgObj.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)’;
}

maybe someone knows how to implement it…

Errm, where’s the HTML5? The demo preview is xhtml strict?

HTML is the solution to all browser incompatibility. CSS3 is another great work. All browser should standardize in order to have a better surfing experience.

Also entirely possible in SVG http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

http://jsdo.it/kiyoken/hoverColor
Please see also this page

Sorry but I don’t get where the HTML 5 link comes in? HTML 5 is not a requirement for this to work – the demo proves that since its using xHTML 4.1.

@Matt Hackmann – maybe you could include some delayed loading so the filters are applied to the images as they need to be, based on the user scrolling, to improve the performance?

Check out this site! i find it very useful. Go ahead ahead and put the link bellow that i provided into your address bar.
Websiteideadrop (dot) zzl (dot) org/

Here you can learn webaite ideas that other users have posted, and share your own ideas. No signups, no registrations, no fees! 900% free!

Awful lot of work for a simple thing done in CSS. Looks like another “throw jQuery at every problem” solution.

No hover when viewing on an iPad.

Looks awesome, nice effect

Cool effect, very useful scripts. thanks for sharing.

Is there a link to the full HTML code?

Sorry, but how exactly is this HTML5? It’s using an XHTML 1.0 Doctype rather than the HTML5 , nor are the meta or script tags marked up using HTML5 syntax. Likewise you’ve used divs rather than section tags etc. I’ve viewed this under Fx, Chrome, Safari etc. Are you using something server side to push it out as XHTML1.0 syntax? If not then you shouldn’t be pushing this out as an HTML5 tutorial.

the demo is pretty good & also help me..
Thanks for post. keep it up

This is just great. Saves a lot of time. Thanks!

great effect for photo galleries and even for bloggers.I found it very useful as i was designing a portfolio site so it helps with jquery scripting.

Your can improve the speed and maintenance by using a var and/or jquery chaining.
If your call each time $(‘.item img’), jQuery have to find the selector each time. By putting it into a var you make jQuery select just once.

So…
var $imgToGrayify = $('.item img');
$imgToGrayify.fadeOut(500)
$imgToGrayify.each(function() {... })
$imgToGrayify.mouseover(function() {...});

Or doing this
var $imgToGrayify = $('.item img');
$imgToGrayify.fadeOut(500).each(function() {... }).mouseover(function() {...});

Or finally, this:
$('.item img').fadeOut(500).each(function() {... }).mouseover(function() {...});


Enjoy ;)

thanx for this tip

Really a nice article!

If I put the script on my website it will affect all images,right? There isnt a way of calling this effect just by an ‘id’? Because i would like to use floating image load, like you click the image, then open a window (inside the site) that shows the image…

Great blog for beginner

Good tutorial, saves alot of time …not converting images to greyscale

i tried but it does not work on the localhost…

@tejas I just made it work on a localhost template for wordpress. Are you targeting the correct images?

thanks for this tutorial. It’s great and I can’t wait for an opportunity to use this beauty on a site.

i will try this info thx!

selamvcxbx

All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..

All whitening formulation is applied by dentists with quality features, powerful

thanks for this tutorial. It’s great and I can’t wait for an opportunity to use this beauty on a site.

I’d like to use this but I’m having the ever so popular mootools/jquery conflict… is there a way to load this where it won’t conflict? imagebymac.com – i’m trying to get the top right myProject rollover to work with it. I’d like to use this effect with my portfolio images but can’t get things to play nice. Any advice? Go ahead and contact me/reply. It’s probly a noob effect with getting the two to work, though I’ve done it before using other jquery scripts… but can’t with this one.

Can we apply it to the image without the CSS? Here is my website http://www.dgraphicstudio.com

A great tutorial – I will certainly be using this effect – thanks!

where can i get the code ???

What an incredibly elegant solution. Thank you!

Good job with html and js.

Wow cool stuff, love it HTML5 rocks very nice

This script is amazing.

http://webdesignersbest.com/

online project auction for clients and web designers

or buy services on site. web design, graphics etc.

This is actually amazing!

This is awesome and it works flawlessly for me in chrome, but I can’t figure out why mozilla’s not displaying it. My images load for a sec and then disappear. The demo works in all browsers. Can anyone help?
http://www.zmeivisuals.com/intro1.php

I know almost nothing of javascript, so any help in the right direction is welcome.

I Have tried this; However when I try to implement it, I just get a colour image, no greyscale to black and white :(

If anyone can help me, E-Mail me on : [email protected] :)

Thank you so much! This effect works wonders, and so easy to use.

I read a few comments and people were experiencing problems with the grey scale not appearing but when works when hovered and it happened to me at first as well.

What I did to fix it was copy the script from the demo page. Somewhere along the lines, the coding must’ve gotten jumbled up.

Hope that helps!

how to use target image?

Is there a way to adjust the greyscale? It should be a bit lighter grey.
How can I adjust this??

hi… how i can download the codes ?? any body help me please…

This is absolutely brilliant! I was killing myself trying to figure out how to grayscale some images across all browsers (had only been able to do it on IE and Firefox before coming across this post). One quick comment though:

– In the javascript function referenced above, the method to fade-in the images to avoid the initial “pop” is different from the function that is now in the source code of the demo. Above it reads:

$(“.item img”).fadeIn(500);

But in the demo you use:

$(“.item img”).animate({opacity:1},500);

I was struggling to avoid the pop, and when I changed my code to use .animate with a target opacity, it worked. I also had to set the initial opacity of my images in my stylsheet to something other that 1 (otherwise, as someone else mentioned here, the image can’t really fade from 1 to 1…) In my case I set the initial opacity in my stylesheet to 0.25 to have them sort of “ghosted” at first, and then the opacity in the javascript function to 0.75.

Anyhow, great resource! THANKS!!

can somebody show / past / OR send me whole code INCLUDING images tags
It looks interesting but Im new to webdesigning and have no idea how to use it
:)

thanks!

The most sexiest website and sexiest tutorials and scripts.

https://github.com/Prydie/jQuery-GreyScale-Plugin
this for me is very simply and easy to use.
however thanks for this interesting post!
grazie

The script works GREAT on FF11 and IE9, really superb!

But it doesn’t fit my needs, cause I need it to work on BACKGROUND-IMAGES, which I use through CSS, like this:

Any idea how to change the script in order to work with bg-images?

Any idea how to make this responsive with bootsrap framework?

good n i like u information….

Nice tutorial and easy to implement

great! finally an alternative attempt to adipoli, which doesn’t work for me :/

Useful sharing. Very easy and helping script for grayscale image hover. Thanks for sharing.

It does not work in internet explorer 8. Is there any way to solve this problem?

Thanks

i try it but my images are not getting colored when govered, only greyscaled and keeps that way. any help ? please

Keh tak berjaya sik.

Nice work..

I modify your script to calculate my dualtone images:
function duotone(src, newR, newG, newB){
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*(255-newR))/255)+newR;
imgPixels.data[i + 1] = ((avg*(255-newG))/255)+newG;
imgPixels.data[i + 2] = ((avg*(255-newB))/255)+newB;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}

where am i suppose to put this? like under what i am so confused :O please help!!

Hi I’m trying to use this code for my tumblr? I’ve tried to put this code in a lot of areas in custom HTML but none of them seem to work? What should be my target image and where in the HTML do I paste the code??? Help?!?

How do you this on tumblr when customizing the blog? Like do you jus tpaste into the html codes?

Excellent ! It all worked in a jiffy ! Thanks .

Thanks, this effect will look great on portfolio sites.

Oh yes…exactly what I need…You save my day..Thanks a lot…Really awesome!!!