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
		// 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);
			this.src = grayscale(this.src);
		// Fade image 
		$('.item img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
			$(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();

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


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.


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


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

Jan 20, 2011 at 9:31 am

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

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…

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.

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?

Jan 20, 2011 at 12:34 pm

That looks useful and the transition isn’t jarring.

Jan 20, 2011 at 12:55 pm

Javascript errors in IE8

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

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.

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.

Jan 21, 2011 at 12:16 am


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

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

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?

Jan 22, 2011 at 5:23 pm

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

Jan 25, 2011 at 1:20 am

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

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

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?

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.

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)

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

Jan 25, 2011 at 4:42 pm

wow! this look awesome!

Jan 25, 2011 at 5:02 pm

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

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?

Jan 27, 2011 at 3:31 am

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

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

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…

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!

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.

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

Jan 28, 2011 at 8:50 am

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


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.

Jan 28, 2011 at 1:06 pm

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.

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?

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

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!

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

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.

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

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.

Feb 2, 2011 at 7:19 am

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

Feb 2, 2011 at 2:56 pm

Is there a link to the full HTML code?

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!

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.

Feb 7, 2011 at 11:07 am

wow. Nice effect

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.

var $imgToGrayify = $('.item img');
$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 ;)

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?

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…

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

Feb 10, 2011 at 12:28 am

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

Feb 10, 2011 at 1:31 pm

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

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/

Feb 12, 2011 at 1:42 pm

i tried but it does not work on the localhost…

Feb 13, 2011 at 5:44 am

Great tutorial :)

for those who want the opposite effect just change the opacity.
$(..)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)

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?

Feb 13, 2011 at 6:22 am

A nice idea. Thank you.

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!

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


Maziar Ahmadi
Feb 18, 2011 at 1:59 am

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

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

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

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

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

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.


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.

Mar 5, 2011 at 3:51 am

where can i get the code ???

Mar 5, 2011 at 3:52 am

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

Mar 5, 2011 at 5:26 pm

What an incredibly elegant solution. Thank you!

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.


Brent Dickens

Apr 14, 2011 at 6:58 am

Check my reply for ideas.

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.

Mar 17, 2011 at 10:08 am

Wow cool stuff, love it HTML5 rocks very nice

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?

Mar 20, 2011 at 4:54 pm

This script is amazing.

Mar 21, 2011 at 5:33 pm

is not easy to put on weight

Mar 22, 2011 at 1:49 am


online project auction for clients and web designers

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

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

Mar 30, 2011 at 4:53 am


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.

Apr 11, 2011 at 2:31 pm

This is actually amazing!

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

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.

Apr 14, 2011 at 6:59 am

awww, u must to use this java script :

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.

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.

Apr 21, 2011 at 6:24 am

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.
Could you teach be good when using it only for the link of full page images to adjust very?

My best regards.

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


May 2, 2011 at 3:55 am

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

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 [email protected]


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 [email protected]

May 20, 2011 at 5:07 am


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


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?

Jun 2, 2011 at 6:58 am

Have got this working fine, thanks for your help.

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?

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?

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 : [email protected] :)

Brian Enriquez
Jun 26, 2011 at 5:19 pm

Thank you, this is perfect.

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!

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?

Jul 15, 2011 at 4:14 pm

This is verry good.

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

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!

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

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

Sep 25, 2011 at 10:58 pm

Thanks for the fix. Worked perfectly for me.

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

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.

Aug 23, 2011 at 2:38 pm

And then he handed you the thirty-five 45

Jul 25, 2011 at 6:07 pm

How could one reverse this effect = color to grayscale?

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);
$(this).stop().animate({opacity:0}, 1000);

becomes this:

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

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

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.

Jul 31, 2011 at 10:48 pm


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

Thanks , thats really an awesome post .

Aug 5, 2011 at 6:30 am

Nice Your Blog

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

Aug 26, 2011 at 11:25 am

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

Aug 28, 2011 at 12:43 pm

To set all images monochromatic use this:

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’)
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()

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!

Sep 2, 2011 at 4:47 pm


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!



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

Sep 23, 2011 at 1:29 pm

Thank you for sharing!!

Sep 24, 2011 at 2:33 am

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

Oct 5, 2011 at 5:52 pm


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.

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

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

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!

Nov 20, 2011 at 8:20 am

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

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

Nov 26, 2011 at 1:57 am

how do i use this in tumblr?

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:

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

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!

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!

Dec 27, 2011 at 4:01 pm


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!

Jan 11, 2012 at 3:39 am

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

replace :

this.src = grayscale(this.src);


// Brother version
var ua = $.browser;

// IE < 9 Brother
if ( ua.msie && ua.version.slice(0,3) < 9 ) {


// Canvas Brother
else {

this.src = grayscale(this.src);


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.

Feb 8, 2013 at 7:29 am

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

Jan 13, 2012 at 9:25 am

Anyone figure out the pixel shift bug?

Jan 20, 2012 at 5:11 am

I had it in IE only – fixed it by adding:
to the images.

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:




and my weird right shift was fixed.

Gergely Marton
Jan 18, 2012 at 9:59 am

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?

Jan 19, 2012 at 8:55 am

Wow! Thanks!

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

Feb 1, 2012 at 5:03 am


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’})

Feb 3, 2012 at 1:52 am

How do you tag your images for this to work?


Is that how?

Feb 6, 2012 at 9:06 pm

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

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

Feb 6, 2012 at 9:28 pm

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

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 !

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.

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.

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)
.img_grayscale {
opacity: 0;
position: absolute;
z-index: 998;

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

This should turn the pop into a smooth fade.

Feb 15, 2012 at 5:46 pm

Can you explain that a little bit more?

Feb 21, 2012 at 10:39 am

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


Feb 21, 2012 at 10:54 am

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

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.

Apr 3, 2012 at 8:27 am

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

Mar 7, 2012 at 6:40 am

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

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?

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

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?

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


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.

Apr 12, 2012 at 7:24 pm

this for me is very simply and easy to use.
however thanks for this interesting post!

Ahmed Ibrahim
Apr 20, 2012 at 6:46 am


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.

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

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.

May 25, 2012 at 12:22 pm


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

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

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

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?

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 ?

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?

Jul 10, 2012 at 9:49 pm

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

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.

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?

Jun 27, 2012 at 3:08 am

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

Jul 10, 2012 at 7:03 am

tnx, this is very usefull for me ;)

Jul 12, 2012 at 1:00 am

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

Jul 15, 2012 at 6:57 pm

wear do we paste the code in the html?

Aug 2, 2012 at 4:48 am

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


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

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

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

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.

Aug 6, 2012 at 5:53 am

Keh tak berjaya sik.

Aug 9, 2012 at 9:33 pm

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

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


Aug 20, 2012 at 11:26 pm

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

Aug 27, 2012 at 1:56 pm

Is it possible to make this work on tumblr?

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

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!

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?

Sep 25, 2012 at 12:11 am

This one looks much easier.

Sep 25, 2012 at 12:32 am

Excellent ! It all worked in a jiffy ! Thanks .

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.

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

Dec 3, 2012 at 1:02 pm

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

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.


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


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.

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

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 *