Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify‘s partner) for the jQuery and Javascript code.

View Demo HTML5 Grayscale

The Purpose

This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. To achieve this effect before HTML5, two images are required: a color and a grayscale version. Now HTML 5 made it easier and faster because the grayscale image is generated from the original source. I hope you will find this script useful in your design such as portfolio showcase, photo gallery, etc.

demo screenshot

jQuery Code

The jQuery code below will look for the target images and generate a grayscale version. When hovering the image, it will fade the grayscale image into color.


<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	
	// On window load. This waits until images have loaded which is essential
	$(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		$(".item img").fadeIn(500);
		
		// clone image
		$('.item 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);
		});
		
		// Fade image 
		$('.item img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
		});		
	});
	
	// Grayscale w canvas method
	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();
    }
	    
</script>

How to use it

To apply this to your site:

  • include a copy of jquery.js
  • paste the code as shown above
  • set the target image (eg: .post-img, img, .gallery img, etc.)
  • you may change the animation speed (ie. 1000 = 1 second)

code screenshot

Compatibility

It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. If HTML5 is not supported, it will fallback to original color image. Note: if it doesn’t work with Firefox and Chrome locally. You need to put the HTML file on a web server.

Credits

The Javascript & HTML 5 grayscale is coded by Darcy Clarke.

280 Comments

Shahrulsite
Jan 20, 2011 at 9:29 am

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

Chris
Jan 20, 2011 at 9:31 am

AWESOME! Exactly what I was looking for! Thanks a lot!

drkn
Jan 20, 2011 at 9:43 am

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

Chris Morata
Jan 20, 2011 at 9:46 am

I have this effect on my portfolio site, using the pre-HTML5 technique. Looks like I’m due for an update! Awesome tut, thanks!

Unique Design
Jan 20, 2011 at 9:48 am

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! :)

Mark Corder
Jan 20, 2011 at 9:50 am

Works great on my XP / Chrome 8.0.552.237 – and I agree, it’s AWESOME!
Thanks for showing us this – I had never seen this jQuery trick explained before…

Red
Jan 20, 2011 at 9:56 am

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.

Del
Jan 20, 2011 at 10:51 am

Can’t seem to get this to work. I tried to just run the demo on my site and the images get duplicated, one on top of the other, where the top one only appears when scrolled over. Any ideas?

Rebecca
Jan 20, 2011 at 12:34 pm

That looks useful and the transition isn’t jarring.

Dan
Jan 20, 2011 at 12:55 pm

Javascript errors in IE8

Jason
Jan 20, 2011 at 2:39 pm

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

michel reyes
Jan 20, 2011 at 2:50 pm

Expectacular efecto con las imagenes, creo que muy interesantes!!!

Grant
Jan 20, 2011 at 3:03 pm

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

Robert Steers
Jan 20, 2011 at 4:13 pm

Wouldn’t it just be easier to do this with CSS?

Olli Salmu
Jan 20, 2011 at 5:00 pm

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.

Web Design NZ
Jan 20, 2011 at 5:38 pm

That’s a nice, subtle transition to colour too. Thanks for the article.

Jaffar Khorshidi
Jan 20, 2011 at 7:11 pm

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.

[rb]
Jan 20, 2011 at 9:21 pm

Or you could use an svg filter without the need to tax the cpu (well if you had heaps of images) looping thru pixels.

phpcook
Jan 21, 2011 at 12:16 am

nice

Ajay Jagdeva
Jan 21, 2011 at 1:22 am

The animated effect is possible with this only not with CSS.

Yes, Javascript error in IE8.

Markus Sandy
Jan 21, 2011 at 3:36 pm

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

Web Design Fact
Jan 22, 2011 at 8:31 am

Nice technique! Thanks for sharing it. It can enhanced by applying grayscale to images before they were revealed.

Web Designers UK
Jan 22, 2011 at 8:33 am

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

Webul
Jan 22, 2011 at 10:22 am

thanx a lot.

Andrew Buckle
Jan 22, 2011 at 10:44 am

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

Almog
Jan 22, 2011 at 4:58 pm

Can’t get this to work, pretty sure I did everything correctly was anyone else having issues with this?

Enk.
Jan 22, 2011 at 5:23 pm

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

dipesh
Jan 25, 2011 at 1:20 am

i love this demo….
its really awesome.. :)
Thanks

Keysa
Jan 25, 2011 at 2:36 am

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 :)

Keysa
Jan 25, 2011 at 3:08 am

Updates: I copied the jquery.min.js content and pasted it into a new document.
By changing that I realized that the images turn grey but no effect when I rollover them….why might that be?

JamesTheCraig
Jan 25, 2011 at 3:46 am

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

Ronne
Jan 25, 2011 at 6:16 am

grayscale image has to be manually converted in order to be displayed on the web

that’s not exactly true, it’s possible to create a grayscale (or duotone) copy of your image with PHP. ofcourse this means storing another physical image on your server, but there’s no manual action needed.

Pablo Almeida
Jan 25, 2011 at 8:35 am

Woow! Amazing technique for image galleries! ;)

Rudolph Gottesheim
Jan 25, 2011 at 12:57 pm

This is amazing. Great work.

One thing though: I haven’t looked too closely at the code, but it seems like you’re just averaging the RGB values. It would be more accurate to use a weighted average: Y = 0.2126 R + 0.7152 G + 0.0722 B – http://en.wikipedia.org/wiki/Luma_(video)

cooljaz124
Jan 25, 2011 at 4:42 pm

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 :)

klaudio
Jan 25, 2011 at 4:42 pm

wow! this look awesome!

charlie
Jan 25, 2011 at 5:02 pm

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

Del
Jan 26, 2011 at 11:49 am

Have tried everything, but still can’t get this to work. Can someone post the actual HTML code used to display the images on the page?

DareDevil
Jan 27, 2011 at 3:31 am

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

Thany
Jan 27, 2011 at 6:58 am

I think I’d use a webworker to generate grayscales. On slower machines and/or larger images, it may delay loading the page too much, and webworkers are non-blocking. They don’t work on all browsers, but the same is true for canvas, so I think it’ll be better in the end.

Especially when you go from the grayscale effect to a blur effect, which is much more cpu-intensive :)

Pascal
Jan 27, 2011 at 9:15 am

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…

michael
Jan 27, 2011 at 10:14 am

sweet. i just recently came across this photo site: http://olivermuc.com and wondered how that effect was done.
thanks for the insight and code!
m.

Phil
Jan 27, 2011 at 11:50 am

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

Matt Hackmann
Jan 27, 2011 at 5:53 pm

It’s cool in theory, but seems far too processor intensive to be feasible. Doing a sprite is going to be faster all around with, of course, the exception of generation time. If you want to automate this process, you could use a server side script to generate and cache a color/bw sprite for you.

HTML5 Web Designer
Jan 28, 2011 at 7:49 am

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.

EvaBrown
Jan 28, 2011 at 8:08 am

I think good work! This effect is simple and it easy to do.

Dan Eastwell
Jan 28, 2011 at 8:17 am

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

Andris
Jan 28, 2011 at 8:50 am

I coded kind of a similar effect with the GD library some PHP and jQuery.

http://ibl.ch/agentur/team

The website is coded for WordPress, so there was no ability to use sprites. ‘Cause each team member is displayed by the post_thumbnail function of WordPress.

Maybe your effect is a bit faster than mine.

taro
Jan 28, 2011 at 1:06 pm

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

Laura Mitter
Jan 28, 2011 at 1:15 pm

While very cool, in this day and age of increased efficiency and faster production, I think it might be quicker to do the three clicks in photoshop to save a greyscale version rather than code all this.

I’m not sure what the load-difference would be for the average user. If the code takes less time to process than loading a new image, that might provide some benefit.

James
Jan 29, 2011 at 4:42 pm

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?

Jasper
Jan 30, 2011 at 8:09 am

Looks nice!
However wouldn’t it be good to make the grayscale images in Photoshop or another graphic programme because it gives you much more control over how the grayscale image looks.
Of course great for simple images! :-)

Don
Jan 30, 2011 at 5:11 pm

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!

Jdsans
Jan 30, 2011 at 9:31 pm

Help please I add all the things you specified above but the hover effect is still not working. This is the url: http://whitemagicdemo.blogspot.com/.
Does this effect work only for folder images on any server or direct links also

Rob
Jan 30, 2011 at 10:24 pm

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

Gigi
Jan 30, 2011 at 11:12 pm

With IE i get an error for
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

Ken
Jan 31, 2011 at 6:16 am

No hover when viewing on an iPad.

淘宝女装返利
Jan 31, 2011 at 7:09 am

宝宝支持你的博客!www.zloli.com 淘宝女装返利,淘宝减肥产品返利

Steff - Web Courses Bangkok
Jan 31, 2011 at 9:46 pm

Looks awesome, nice effect

淘宝返利
Feb 1, 2011 at 10:46 am

宝宝返利 站长支持你的博客!www.zloli.com 淘宝返利 减肥产品返利。

Jahangir Hussain
Feb 1, 2011 at 10:34 pm

Cool effect, very useful scripts. thanks for sharing.

Fredrik
Feb 2, 2011 at 7:19 am

Looks awesome, and nice effect. One thing tho… I think the hover effect is a bit slow

Kiefer
Feb 2, 2011 at 2:56 pm

Is there a link to the full HTML code?

joe
Feb 2, 2011 at 5:38 pm

This method is very slow… I do not recommend using

Dianna McDonald
Feb 2, 2011 at 5:44 pm

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.

damla etiket
Feb 3, 2011 at 4:48 am

this is great thank you… for much..

search engine optimization usa
Feb 3, 2011 at 4:58 am

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

Nikola Arezina
Feb 3, 2011 at 4:09 pm

Great, I’ve been lookin’ for while some thing like this, thanks mate

Website Design Bangkok
Feb 5, 2011 at 4:31 am

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

Theo
Feb 6, 2011 at 6:20 am

Very nice and smooth effect !

website development developer
Feb 7, 2011 at 3:39 am

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.

Timich
Feb 7, 2011 at 11:07 am

wow. Nice effect

MoOx
Feb 7, 2011 at 11:09 am

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 ;)

Andrew
Feb 7, 2011 at 11:15 am

nice! will try out soon :-)

Cam mozaik
Feb 8, 2011 at 4:07 am

thanx for this tip

Jose Rodriguez
Feb 8, 2011 at 5:28 am

Could it be the other way around? from greyscale to color. So you get in color selected ones

Francis Russo
Feb 8, 2011 at 8:34 am

Really a nice article!

Phil Arnold
Feb 8, 2011 at 10:01 am

This article should be renamed and it’s description amended as it is very misleading. I have looked a number of times at the example page and cannot find one piece of HTML5! wtf?

Danton
Feb 8, 2011 at 4:23 pm

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…

Danton
Feb 8, 2011 at 6:38 pm

I did found a way to express my self better. I wish compatibility with Lightbox JS.

Proffessional Web Design Company
Feb 9, 2011 at 6:42 am

Great blog for beginner

YAR ZAR
Feb 10, 2011 at 12:28 am

Such a great Article.. My first HTML5 try!!

harprit
Feb 10, 2011 at 1:31 pm

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

John
Feb 11, 2011 at 3:15 am

@Phil Arnold: agreed. it’s just a whole lot of jquery. same concept as used on http://www.visualboxsite.com/

tejas
Feb 12, 2011 at 1:42 pm

i tried but it does not work on the localhost…

krike
Feb 13, 2011 at 5:44 am

Great tutorial :)

for those who want the opposite effect just change the opacity.
in:
$(..)mouseover() change the opacity to 0
$(..)mouseout() change the opacity to 1
$(..)each change the opacity to 1 (scroll to the right if you can’t see it)

krike
Feb 13, 2011 at 5:46 am

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

Ralph
Feb 13, 2011 at 6:22 am

A nice idea. Thank you.

Elena
Feb 15, 2011 at 9:28 am

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

Web Designer
Feb 16, 2011 at 6:09 am

Thank you for the consistent quality in content and sharing one of your favorite post.

Uçak Bileti
Feb 16, 2011 at 9:02 am

i will try this info thx!

Sachin
Feb 16, 2011 at 10:17 am

thank you for post. it’s too good.

expect more latest stuff about HTML5 n CSS3.

kilo aldirici
Feb 17, 2011 at 5:40 pm

selamvcxbx

Maziar Ahmadi
Feb 18, 2011 at 1:59 am

Wow what a great tutorial. I used this a lot in my projects.
Thanks!

diş beyazlatma kalemi
Feb 18, 2011 at 6:20 am

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 ..

BB
Feb 19, 2011 at 5:14 pm

Nice and easy! Would it be possible to give the grayscale version of an image a monochromatic overlay?

pepper time
Feb 21, 2011 at 11:26 am

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

pepper time
Feb 21, 2011 at 11:26 am

A nice idea. Thank you.

Totally Bored
Feb 21, 2011 at 1:36 pm

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

css splash
Feb 22, 2011 at 10:04 am

Good sharing !Css splash | Web design inspiration gallery

bobby
Feb 26, 2011 at 7:24 pm

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.

Logo Design
Feb 28, 2011 at 4:47 pm

Thanks for the handy tutorial – I am not sure it is something I can use that often as I do predominantly logo design work, but the ideas are definitely useful – thanks :)

David
Mar 1, 2011 at 8:53 am

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

add2seo.com
Mar 1, 2011 at 3:21 pm

Free SEO Directory
Free to Add Your Website Our easy to use SEO Directory and tutorials make search engine optimization accessible to everyone.

add2seo.com

Pen
Mar 3, 2011 at 5:02 am

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

Web Designer London
Mar 3, 2011 at 5:07 am

It would be great to use it in our next project. Really nice post to share as well with our web designers.

lemnbu!!!!!
Mar 5, 2011 at 3:51 am

where can i get the code ???

simple
Mar 5, 2011 at 3:52 am

where can i get the code for my blog ????????????????

Alex
Mar 5, 2011 at 5:26 pm

What an incredibly elegant solution. Thank you!

wptidbits
Mar 12, 2011 at 2:03 pm

It is now supported by IE9. Not to brag about, I still love firefox and Chrome. However, this measure taken by IE version 9 is going to benefit all designers not to worry about inability of certain feature which was not supported by IE.

Jared - Stealth Web Designs
Mar 14, 2011 at 1:01 pm

Good job with html and js.

Brent Dickens
Mar 17, 2011 at 3:32 am

This script looks great and exactly what I’m looking for. Sadly I can’t seem to get it working on my wordpress powered site http://www.brentdickens.com.
It doesn’t work on the dynamic thumbnail images and half works on the main image which is static and part of the page. That image does the grey image production but not the rollover. Any ideas? I would love to get it working.

Cheers,

Brent Dickens

NamKazt
Apr 14, 2011 at 6:58 am

Check my reply for ideas.

Herit
Aug 29, 2011 at 4:29 am

dude i was having same problem, if you have multiple images, remove all, and keep only one, plus the image should be in the same domain (not even sub-domain!) and it will work. the restrictions for domains and multiple images are still not known to be why and will update as i find something.

Dessign
Mar 17, 2011 at 10:08 am

Wow cool stuff, love it HTML5 rocks very nice

Vivek
Mar 18, 2011 at 3:30 am

Although HTML5 have lots of new features that are never before, yet I think that Flash has its strong place in web designing that will not be replaced soon by any other language. What do you think?

Jason
Mar 20, 2011 at 4:54 pm

This script is amazing.

sumomax
Mar 21, 2011 at 5:33 pm

is not easy to put on weight

dan
Mar 22, 2011 at 1:49 am

http://webdesignersbest.com/

online project auction for clients and web designers

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

jude
Mar 22, 2011 at 2:29 pm

I’m afraid I don’t understand what this means: “set the target image (eg: .post-img, img, .gallery img, etc.)”

When I load the page in FF 4.0, the image is not visible; when I hover it fades in. I’m not getting a grey-scale image on load (using the default code as is).

rafal
Mar 30, 2011 at 4:53 am

Hello,

Not only works on IE7.
I tested on IE7 :(
Did anyone find a way how to do that work on IE?

Web Design Agency India
Mar 25, 2011 at 4:41 am

I’m afraid I don’t understand what this means: “set the target image (eg: .post-img, image, .gallery image, etc.)”

Techie Zone
Mar 31, 2011 at 9:04 am

In my case the images apepar in grey scale only. When I hover over the image nothing happens. I tried with exactly the same code as per demo just changed the images. Plz help.

Benjamin Fournier
Apr 28, 2011 at 2:24 pm

Have you used Internet Explorer? The trick shown works on browsers that are HTML5 complliant. Internet Explorer 8 is not.

Kuen
Apr 11, 2011 at 2:31 pm

This is actually amazing!

NamKazt
Apr 14, 2011 at 6:57 am

i have error sercurity in method getImageDATA
and already resovled
hope it helpful :

// Grayscale w canvas method
function grayscale(src){

$.getImageData({
url:src,
success: function(imagegray){
var canvas = document.createElement(‘canvas’);
var ctx = canvas.getContext(‘2d’);
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
for(var y = 0; y < imagegray.height; y++){
for(var x = 0; x < imagegray.width; x++){
var i = (y * 4) * imagegray.width + x * 4;
var avg = (imagegray.data[i] + imagegray.data[i + 1] + imagegray.data[i + 2]) / 3;
imagegray.data[i] = avg;
imagegray.data[i + 1] = avg;
imagegray.data[i + 2] = avg;
}
}
ctx.putImageData(imagegray, 0, 0, 0, 0, imagegray.width, imagegray.height);
return canvas.toDataURL();
},
error: function(xhr, text_status){
}

});

Bests regards.
Namkazt

NamKazt
Apr 14, 2011 at 6:59 am

awww, u must to use this java script :
https://github.com/betamax/getImageData/raw/master/jquery.getimagedata.min.js

tobyn
Apr 15, 2011 at 2:31 am

Is there any way to trigger this when hovering over a separate div?
For example, if the image is under a div with a z-index of 9999, can the effect be triggered when the cursor moves over that div?
At the moment, as soon as the cursor is over the div, the image fades back to B&W.

dexx
Apr 17, 2011 at 1:06 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

roro
Apr 21, 2011 at 6:24 am

Hello.
I am Japanese, and I am roro who cannot talk about English.
Because it writes by using the translation
I’m sorry if there is a shortcoming.

It was not possible to use it well on my site though this script was able to be used well in the demonstration.
Therefore,
Could you teach be good when using it only for the link of full page images to adjust very?

My best regards.

Then,
We will wait for the report though it knows on your precious time.

roro

Stalin
May 2, 2011 at 3:55 am

Really amazing effect. I was searching for this effect for long time.. Thanks Admin for this tuto.

Darío
May 18, 2011 at 7:17 am

I was looking for this effect for a long time. Thank you very much for sharing. I wanted to know if anyone can help me insert my WordPress. I’m a newbie. I accept all forms of aid. Many thanks. My email address is dadg15@gmail.com

__________

Estaba buscando este efecto desde hace mucho tiempo. Muchas gracias por compartirlo. Quería saber si hay alguien que me pueda ayudar a insertarlo a mi WordPress. Soy un novato. Acepto todo tipo de ayuda. Muchisimas gracias. Mi correo electronico es dadg15@gmail.com

aiphes
May 20, 2011 at 5:07 am

Hi

i would to use this for drupal website but there is an issue with JS,if someone can take a look to http://drupal.org/node/1041864

thanks

Dean
May 24, 2011 at 10:20 pm

I tried this out, my original image (that is meant to be black and white) doesn’t appear at all, but when you mouse over it, it becomes visible in color.

Any ideas?

Lee
Jun 2, 2011 at 6:58 am

Have got this working fine, thanks for your help.

Subhramani
Jun 13, 2011 at 7:03 am

Beautiful. But why does it mess up the styles? :-s
When I include this javascript, the images have absolutely no spacing in between them. (I know its a crappy way to explain).

Joe W.
Jul 9, 2011 at 5:15 pm

I had this problem as well. I couldn’t find a way to get the CSS to override, even when I put !important on it. It would always devour the css margins, so eventually had to hack it into the JS itself, putting “el.parent().css({“width”:this.width+10,”height”:this.height+8})” directly into the Javascript. After that, it worked ok. I am still having problems with the slow load times and the IE functionality, but I’ve only toyed with it for about 20 minutes so far.

Anyway, hope this helps.

Mont Blanc Pen
Jun 13, 2011 at 9:34 pm

What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

Zornitsa
Jun 17, 2011 at 11:20 am

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.

Dallas Web Designer
Jun 18, 2011 at 11:50 am

Cool I will have to try this out. I am sure it will be faster than creating two images in Photoshop, one grey the other color.

Theo Barber-Bany
Jun 26, 2011 at 6:23 am

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 : Trifidpaw@gmail.com :)

Brian Enriquez
Jun 26, 2011 at 5:19 pm

HTML5! SICK!
Thank you, this is perfect.

Adam
Jul 1, 2011 at 12:43 am

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!

Kimberly
Jul 7, 2011 at 1:49 pm

It took some time but I just got the effect to work on my website . It is so awesome. Thanks :)

Ladida Cafe
Jul 14, 2011 at 8:42 am

how to use target image?

orhanbt
Jul 15, 2011 at 4:14 pm

This is verry good.

Bambit
Jul 18, 2011 at 7:28 pm

Works beautifully on all browser except IE versions 7 8 and 9. Tough, but it would be nice if someone had a solution :)

Peter
Sep 4, 2011 at 1:10 am

What DOES work in any IE version? We should just stop supporting it. eventually MS will either comply with W3C or user will eventually see that things look like crap and other browser actually work.

Btw Awesome tutorial, Don’t mean to troll. but effects like these are awesome and that it wont work only in IE… Come on!

Michael
Sep 21, 2011 at 3:18 pm

You actually can get it to work in IE 6 and up by using a ie’s grayscale filter.

Just replace
this.src = grayscale(this.src);

With
if($.browser.msie){
this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
} else {
this.src = grayscale(this.src);
}

Josh
Sep 25, 2011 at 10:58 pm

Thanks for the fix. Worked perfectly for me.

Harry
Jul 19, 2011 at 5:24 am

I’m sorry but it’s not really HTML5 it’s Javascript and jQuery put together with some HTML tags that were present since HTML 3

Lawrence
Aug 29, 2011 at 3:30 pm

It is HTML5 as it generates a canvas grayscale image. How is that not HTML5?

mannequin heads
Sep 9, 2011 at 12:09 am

I just wanted to construct a simple word in order to thank you for all of the precious facts you are showing at this site. My rather long internet research has now been honored with reliable information to share with my friends and classmates. I ‘d state that that many of us visitors actually are very much endowed to be in a really good community with very many outstanding professionals with great suggestions. I feel truly lucky to have encountered your website and look forward to really more fabulous times reading here. Thanks a lot again for all the details.

Web Design
Jul 24, 2011 at 9:02 am

It’s easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it’s enough to make you want forego punctuation altogether. Well, back when it was alive and kicking, the Latin language did just that — and it didn’t stop there. Written Latin also omitted spaces between words or lowercase letters.

complex41
Aug 23, 2011 at 2:38 pm

And then he handed you the thirty-five 45

Asor
Jul 25, 2011 at 6:07 pm

How could one reverse this effect = color to grayscale?

Josh
Oct 20, 2011 at 11:08 am

Well, it would be easiest to use 2 images, which is what this works around. I see no reason you couldn’t apply this in reverse… to have it switch from color to gray onMouseHover/Click, etc.

For instance, this:

// Fade image
$(‘.item img’).mouseover(function(){
$(this).parent().find(‘img:first’).stop().animate({opacity:1}, 1000);
})
$(‘.img_grayscale’).mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});

becomes this:

// Fade image
$(‘.item img’).mouseout(function(){
$(this).parent().find(‘img:first’).stop().animate({opacity:0}, 1000);
})
$(‘.img_grayscale’).mouseover(function(){
$(this).stop().animate({opacity:1}, 1000);
});

It would also have to be in color, rather than grayscale onLoad… I believe.

corvus
Jul 27, 2011 at 3:33 am

Where is html5?

james contrini
Jul 31, 2011 at 5:19 am

Alexis Ohanian, co-founder of Reddit.com, talks about the value of college education and the “dire need” for skilled labor in the U.S. Higher education fails to provide students “good value” for the money they and their families spend, more than half of U.S. adults said in a Pew Research Center survey. Ohanian speaks on Bloomberg Television’s “InBusiness With Margaret Brennan.

yu
Jul 31, 2011 at 10:48 pm

ererer

online cake decorating tips
Aug 4, 2011 at 8:29 am

Thanks , thats really an awesome post .

jewellerygifts
Aug 5, 2011 at 6:30 am

Nice Your Blog

Daoud
Aug 11, 2011 at 10:23 pm

Is it possible to use this in a fluid layout, when the images have to resize to 100% of their containing element?

Colin McKinney
Dec 10, 2011 at 7:45 am

I’m also looking for a solution for images set at 100% in a fluid layout. Does anyone have any ideas?

Alan L
Aug 15, 2011 at 1:13 pm

Where’s the HTML5, and why wouldn’t you rather do this server side?

mannequin heads
Aug 30, 2011 at 11:41 pm

I enjoy you because of each of your effort on this web page. Debby really likes carrying out investigations and it’s obvious why. My spouse and i hear all of the dynamic medium you give functional guidance by means of the blog and as well improve response from some other people on that situation then my child is now learning a lot. Take pleasure in the rest of the year. You’re the one doing a stunning job.

complex 41
Aug 23, 2011 at 10:09 am

And then he handed you the thirty-five 55

Janine
Aug 26, 2011 at 11:25 am

How can I remove the grayscale when the image has been clicked? Still figuring this one out. :(

vasava
Aug 28, 2011 at 12:43 pm

To set all images monochromatic use this:

$(‘img’).each(function(){
if ($.browser.msie) this.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)’
else {
var canvas = document.createElement(‘canvas’)
canvas.width = this.width
canvas.height = this.height
var ctx = canvas.getContext(‘2d’)
ctx.drawImage(this,0,0)
var thisd = ctx.getImageData(0,0,this.width,this.height)
var pix = thisd.data
for (var i = 0, n = pix.length; i < n; i += 4) pix[i] = pix[i+1] = pix[i+2] = (pix[i] + pix[i+1] + pix[i+2]) / 3
ctx.putImageData(thisd, 0, 0)
this.src = canvas.toDataURL()
}
});

Herit
Aug 29, 2011 at 12:08 pm

Need urgent help!!
1: On Hover on image it is converting to grayscale and on mouse out it reverts, but how to work around if you want whole div to be active (hover over anything in the div, like text or anything containing in the div) and the image shall animate.??

2: Images hosted in same directory are only working properly, but when images hosted on other site/domain are linked to img, its not working at all!

Tamas
Sep 2, 2011 at 4:47 pm

Hello!

Woww… I love this… and immediatelly I tried to use it for a test design: http://tarifakft.com/grayscale/
It works very nice, indeed!

However, there is a little “gap” at the left and the top of the images, where the cursor detects the other, next element. It does not follow the shape of the image, but uses a square…

How may I do it in a way, the the exact image is detected, and it senses the hover exactly over the appropriate image?

Thanks a lot!

Greetings,

Tamas

Rafael John
Sep 4, 2011 at 7:45 am

hi, sorry but I cant get it to work. i have followed the rules on putting the js in the head tag.
my gallery images are in a and I am putting
but its inside an anchor tag.
im I doing it right? giving the img a class name of “item img?” or where should I put it? I haven’t changed a coded in the JS.please help

Masoud
Sep 23, 2011 at 1:29 pm

Great
Thank you for sharing!!

rahul
Sep 24, 2011 at 2:33 am

its not working in chrome or firefox.. its only working in safari..

tetret
Oct 5, 2011 at 5:52 pm

ret

Dain
Oct 21, 2011 at 8:32 pm

very very helpful and much appreciated, fits in well with any div layout, no need to adjust size of divs or images.

Josh
Oct 24, 2011 at 9:54 pm

Is there a way to reverse it so the color displays at rest and when hovered over it turns gray? thanks awesome plugin

Raj
Nov 8, 2011 at 8:24 am

I’m using the same method on my service, I’m getting Uncaught Error: INDEX_SIZE_ERR DOM Exception 1, can any one help?

NB:- The error is only in chrome

Daniele
Nov 22, 2011 at 7:42 am

I had the same error in chrome and safari.

I was calling the function in document.ready instead of $(window).load as it is in the example.

I changed that and it works fine now!

Uranbold
Nov 20, 2011 at 8:20 am

I removed CSS opacity to “0” then working. But how to change Grayscale to Green colored scale ?

Rogier
Nov 24, 2011 at 5:48 am

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

kaitlyn
Nov 26, 2011 at 1:57 am

how do i use this in tumblr?

Fercatas
Jun 19, 2012 at 9:18 am

I’m wondering the same… also, how do you reverse it? I want the coloured images to turn into a grayscale, like it happens on this Tumblr: http://4pologize.tumblr.com

Chris Bradbury
Dec 5, 2011 at 11:08 am

Thanks for your work. Nice effect.

I’ve been implementing on a site I’m working on but when I was doing some testing for IE8 and 7 this didn’t work. I am using the HTML 5 shiv located here:
http://html5shiv.googlecode.com/svn/trunk/html5.js

…but this unfortunately doesn’t get it working.
Is there any intention of making this compatible with anything but latest gen browsers?
Thanks!

Freelance Artist
Dec 8, 2011 at 12:17 am

OMG! This is the must awesome image over script I ever seen! I cannot believe the transition of colors is in the code. I will definitely use this for my portfolio. Thanks a lot!

Neil
Dec 13, 2011 at 9:15 am

This works really well. Very impressive but has anyone noticed that it shifts the images 30 odd pixels to the right?

Im using it in conjunstion with a standard WP Gallery. I shall play about with the CSS in the JS I think

George Merlocco
Dec 27, 2011 at 3:52 pm

Awesome tutorial guys! This is the best implementation I’ve seen, along with very tight code. Cheers and thanks!

adsf
Dec 27, 2011 at 4:01 pm

adsfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

Peter
Jan 5, 2012 at 4:07 pm

Could someone tell me why this moves my image over and down? I’m trying to implement this into my custom joomla template to a dynamically generated image tag. I have several images in a row and the first image is is pushed down and to the right. Any help would be appreciated!

David
Jan 11, 2012 at 3:39 am

If someone interested, I update the script for IE < 9,

replace :

this.src = grayscale(this.src);

by

// Brother version
var ua = $.browser;

// IE < 9 Brother
if ( ua.msie && ua.version.slice(0,3) < 9 ) {
el.css('filter',"progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)");

}

// Canvas Brother
else {

this.src = grayscale(this.src);

}

ugreen
Jan 20, 2012 at 5:09 am

Brilliant! I’ve been trying for hours to fix it in IE, and the you do it in such a simple fashion. Thanks.

Patony
Feb 8, 2013 at 7:29 am

Great! Many thanks for this awesome fix for IE7/IE8!! :-) It’s easy way!

jVilla
Jan 13, 2012 at 9:25 am

Anyone figure out the pixel shift bug?

ugreen
Jan 20, 2012 at 5:11 am

I had it in IE only – fixed it by adding:
position:relative;
left:0;
to the images.

Otreva
Jan 24, 2012 at 2:59 pm

I also had a pixel shift bug in Firefox 9 and IE 7 where the images were shifting right.

If using the exact script at the top of the page, on line 13 I changed:

el.css({“position”:”absolute”})

to

el.css({“position”:”relative”})

and my weird right shift was fixed.

Gergely Marton
Jan 18, 2012 at 9:59 am

Hello,
Great tutorial indeed. I’ve used this on a project to make all images grayscale when loaded and add color hover effect.

I bumped into a small bug though:

When you apply this script to images and one image fail to load, it breaks the whole code. As I understood it should be a imgObj.onload = function() {
before the ctx.drawImage() function so the page will wait until the images are loaded, but this just draws a transparent image.

Any thoughts?

Engin
Jan 19, 2012 at 8:55 am

Wow! Thanks!

Otreva
Jan 23, 2012 at 12:54 pm

David, thanks for the IE9 or less change to the script. I was trying myself and decided to look for the original post.

Thank you!

Ben Clarke
Jan 31, 2012 at 4:34 am

Thanks a bunch for this! Really like using this effect on websites it gives a site a really clean feel without having to use to many colours in thumbnails! Thanks

David
Feb 1, 2012 at 5:03 am

hi,

with firefox 10 there is a short black between grayscale/color transtion.

Here is a strange fix with background-color :
.clone().addClass(‘img_grayscale’).css({‘z-index’:’500′,’opacity’:’0′,’position’:’absolute’, ‘background-color’ : ‘#FFF’})

Nick
Feb 3, 2012 at 1:52 am

How do you tag your images for this to work?

//

Is that how?

elijah
Feb 6, 2012 at 9:06 pm

why do the pictures fade completely away? for me they don’t go to grayscale. they disappear.

Chris
Feb 15, 2012 at 5:02 pm

For this I might be able to help out, could you paste your JS code? That could help resolve the problem (if not already resolved).

elijah
Feb 6, 2012 at 9:28 pm

nvm. i guess it had to do wtih opacity. THX!

Don
Feb 11, 2012 at 3:18 am

Hi Elijah – I’m having an issue where the images start 0ut in Colour and fade away to nothing. Please could you post what you did to correct this issue?

Thanks in Advance !

elijah
Feb 7, 2012 at 10:57 am

i still get the color pop. any idea how to change that? i also noticed it happens on yours as well.

Chris
Feb 15, 2012 at 5:01 pm

Got a fix yet? The initial fade in doesn’t work for me and I get this “pop” issue as well. I’ve even tried making different functions to fade it in but hat didn’t resolve the problem (I’m not that experienced with Javascript…), so I guess the error must be somewhere in the HTML (which is exactly the same as used in the demo) or in the JS (which is copied as well).

I copied the code to test if it works for me as well, because sometimes there is still some code that has to be added in order for it to work properly. After that, I change the code so that it fits my design.

Chris
Feb 15, 2012 at 5:11 pm

I’ve got my fix. The image doesn’t start off with 0 opacity but at 100 and therefor cannot fade in any further from 100 to 100, meaning that it is already fully loaded from the start. Change the initial opacity to 0 and it should be ok. (I used an external CSS sheet)
[code=”CSS”]
.img_grayscale {
opacity: 0;
position: absolute;
z-index: 998;
}
[/code]

And in the HTML code, give the image the following:
[code=”HTML”]
style=”style=”opacity: 0;”
[/code]

This should turn the pop into a smooth fade.

Maki
Feb 15, 2012 at 5:46 pm

Can you explain that a little bit more?

raja
Feb 21, 2012 at 10:39 am

i want the images to go GRAY on mouse over . else nothing should happen .

thanks

raja
Feb 21, 2012 at 10:54 am

change opacity”:”100″
and
// Fade image
$(‘.view-content img’).mouseover(function(){
$(this).parent().find(‘img:first’).stop().animate({opacity:0}, 1000);
})
$(‘.img_grayscale’).mouseout(function(){
$(this).stop().animate({opacity:1}, 1000);
});
});

Yeswanth
Mar 2, 2012 at 12:51 am

i did every thing but the thing is not working at all ! Can you explain me what changfes should i do in HTML or CSS . . . . I have just added the JS

Celso Hernandez
Mar 4, 2012 at 5:57 pm

could i apply these to a wordpress theme?

شات صوتي
Mar 6, 2012 at 7:16 pm

thnks my Pro we need more

Amitav Roy
Mar 6, 2012 at 10:51 pm

I tried this and works dam well. Awesome script.

andre
Apr 3, 2012 at 8:27 am

can you show whole working code with html etc…please :)
i am getting difficulties with implementing it

brainz
Mar 7, 2012 at 6:40 am

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

yuuuk
Mar 18, 2012 at 8:08 pm

i tried everything and it doesn’t work. nothing’s changing. can you summarize it step by step please?

A+S
Mar 26, 2012 at 10:59 am

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!!

ismael
Mar 31, 2012 at 3:50 pm

I recently made a change to my template on dreamweaver and updated the template to the page where i was using the grayscale and now it is not working . It is saying that the jquery.min.js is not on the local disk do you have any ideas on what i can do to fix the problem?

andre
Apr 3, 2012 at 8:12 am

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!

nathan
Apr 6, 2012 at 5:50 am

It looks great but I have two problems.

The site is loading with the images in colour and then turning to greyscale.
The images are now pushing down and covering my descriptive text below.

Any ideas?

Shahid Karimi
Apr 9, 2012 at 11:41 am

The most sexiest website and sexiest tutorials and scripts.

Jessica Guzman
Apr 10, 2012 at 3:27 am

I’ve been trying to get this code to work on my Tumblr because I really dislike the random splash of color everywhere in my very minimal theme.

You can check it out at- http://jessicaisabamf.com/

I want all the images I reblog to be black and white, and when hovered over to be color. Is that possible?

I’ve tried several times and I can’t seem to get it right.

stefano
Apr 12, 2012 at 7:24 pm

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

Ahmed Ibrahim
Apr 20, 2012 at 6:46 am

Fantastic…

Madrigal
Apr 27, 2012 at 11:58 am

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?

Deck Brisbane
May 1, 2012 at 1:15 am

I have used HTML5. This is the latest version of HTML. It will help us in our working. Thanks a lot.

philipp
May 6, 2012 at 8:12 am

Any idea how to make this responsive with bootsrap framework?

obat telat bulan
May 10, 2012 at 2:18 pm

thanks for info u tips

obat telat bulan
May 10, 2012 at 2:25 pm

good n i like u information….

rey
May 12, 2012 at 1:21 pm

hi, I’m having a problem, my image doesn’t go to color it stays in b/w.

Dejocare
May 25, 2012 at 12:22 pm

GG NOT WORKING IN CHROME, B&W IMAGE ISNT DISPLAYED ;( ;(

Ernst
Jun 17, 2012 at 1:50 am

Chrome can’t get the image data since it is tainted by cross origin data, and I don’t know what the hell Chrome did that. CSS3 would be a better solution to that. like @romanliutikov down

Lek Dellosa
May 29, 2012 at 7:10 am

Hey, nice tutorial! :) I just have a question regarding the jquery.min.js? Do i have to download anything just for that to work? Or can I simply use that?
Thanks anyway! :)

Lek Dellosa
May 29, 2012 at 7:25 am

Hello! :) Nice tutorial. I just wanna ask if I need to download anything for this to work, regrading the jquery. Or I’ll just simply copy the …… ?

Mikey
Jul 19, 2012 at 10:08 pm

jQuery is a very popular tool for javascript/web developers and free on jquery.com. Load it there any way you want just make sure it’s on the page.

Roman Liutikov
Jun 2, 2012 at 1:24 pm

You can just use CSS Filters for Webkit:
div { -webkit-filter: grayscale(1); }
div:hover { -webkit-filter: grayscale(0); }

Rich
Jul 14, 2012 at 10:45 pm

These two lines did the same effect for me. USE THIS ONE IN YOUR CSS!

Check out my page here! richeltong.com/rt-gd.php

Jake
Aug 15, 2012 at 7:31 pm

The feature on your site does not work in Firefox or Internet Explorer. Anyone know a work around?

Dheeraj
Jun 18, 2012 at 3:59 am

Nice tutorial and easy to implement

abhisekh ranjan
Jun 20, 2012 at 1:33 am

can it work with magento framework ? if yes how work help me any one ?

Ton
Jun 25, 2012 at 3:22 am

This is great but it doesn’t work on chrome locally. I didn’t try it on a web server, but it does work on firefox and other browsers. What could be the problem?

ABHISEKH RANJAN
Jul 10, 2012 at 9:49 pm

it will work locally check your js path all path and change it as local

Mikey
Jul 19, 2012 at 10:09 pm

If you did a “save page as” it may have saved the generated greyscaled images and messed things up… I know firefox saves canvas stuff done to DOM for some reason.

Coulton
Jun 25, 2012 at 6:51 pm

This script does not work if you want to load images from different servers. A security warning is thrown. Anyone know of a workaround?

davio
Jun 27, 2012 at 3:08 am

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

hosein
Jul 10, 2012 at 7:03 am

tnx, this is very usefull for me ;)

saha
Jul 12, 2012 at 1:00 am

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

jade
Jul 15, 2012 at 6:57 pm

wear do we paste the code in the html?

Rauf
Aug 2, 2012 at 4:48 am

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

Thanks

Alquiler yates Ibiza
Aug 2, 2012 at 4:52 am

This script does not work if you want to load images from different servers.

Marios
Aug 3, 2012 at 7:18 am

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

Raisun
Aug 4, 2012 at 2:16 pm

I tried this code. but in firefox and chrome the images are not shown at all.
In internet explorer the images appear but no gray effect.
Can anyone please help me.

I copied the code from view source code and tried to run it locally. I changed the path of the images also.

Lala
Aug 6, 2012 at 5:53 am

Keh tak berjaya sik.

Kara
Aug 9, 2012 at 9:33 pm

It isn’t working for me :( help??

KimPixel
Aug 10, 2012 at 10:43 am

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();
}

搜索
Aug 14, 2012 at 4:57 am

dfdfd

sophia
Aug 20, 2012 at 11:26 pm

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

Linda
Aug 27, 2012 at 1:56 pm

Is it possible to make this work on tumblr?

Redwan
Aug 29, 2012 at 4:15 am

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?!?

QROPS
Sep 13, 2012 at 8:53 pm

Fantastic.. Cheers for your insights on the write up HTML5 Grayscale Image Hover,
they are certainly genuinely handy… I enjoyed
checking your content!

Lennie
Sep 23, 2012 at 4:59 pm

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

Ramkumar
Sep 25, 2012 at 12:11 am

This one looks much easier.
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

priya
Sep 25, 2012 at 12:32 am

Excellent ! It all worked in a jiffy ! Thanks .

Annie
Oct 5, 2012 at 11:22 am

Hi, this is really useful and I want to thank you for doing this. I just havea question, how do i declare multiple instances of the image in the same line of code? for example, in the line $(‘.item img’), what if I also want to declare .logo, .articles, .blog… etc… how do i declare all of them in that single code? Do i have to copy and paste the code again?

Business Logo Designer
Oct 9, 2012 at 9:48 am

Thanks, this effect will look great on portfolio sites.

kiran
Nov 27, 2012 at 5:06 am

Thanks for Your Tip, The demo works like magic. But My problem is that I am using WordPress and Its hard for me to achieve this. Any Help that will point me in the right direction, will be deeply appreciated.

–Thank You.
Skype: alokweb_kiran

Aniket
Dec 3, 2012 at 1:02 pm

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

winminsoe
Dec 5, 2012 at 10:53 pm

It’s really useful.

Is that work for the cross domain images ?
I tested with the local image and it’s ok. But now trying to use from 500px website images, it didn’t work. By inspecting DOM , it say insecure to perform action.

Thanks,

mreshane
Dec 6, 2012 at 2:02 am

guys, if you don’t know how to applied it to your website i suggest you guys view the demo page and ctrl+u for chrome or just view the source and look out for the HTML tag, it isn’t that bad you know… they already give you the hint now you guys need to find it your self, be productive.. :D

Cheers…

winminsoe
Dec 6, 2012 at 2:39 am

Dude , are you saying to me ?

I just want to know the canvas can get the width and height of cross domain images. I didn’t say i don’t know how to applied to my site. Pls read carefully.

mreshane
Dec 6, 2012 at 2:32 am

i have a question, i’ve tried to implement it to my portfolio (offline), everythings i put it at the same order, just like you taught here, but what im surprised is i the picture are loaded correctly but the jQuery files wont load, i’ve tried the new version the old version and your version but still nothing is goin on.. can you explain more?

I’ve tried many of jQuery in offline mode but seems like yours is not functional at all or maybe im a nerd in jQuery –

Need help here
Thanx..

Daniel
May 27, 2013 at 8:03 am

Yeah… As soon you apply javascript on the image, it stops being fluid. I’m trying to build a fluid image grid with client logos and it has to scale down the images to fit on lower resolutions. Any idea on how to achieve that?

Gurpreet Dhillon
Dec 23, 2016 at 3:29 am

That’s working for me and this is easy to use.

Thanks for giving that nice and easy coding.

Rita Patel
Feb 6, 2017 at 9:05 am

Why is that it does not work on local and have to host it somewhere?

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.