I found this http://dev.artutkin.ru/desaturate/example2.html but it doesn’t seem to be working for me, I have followed the example and I can’t get it to work as it’s supposed to, I am wondering if maybe it is outdated. I would like to use this on a WordPress site where the featured image would be set for a post but would be desaturated and then colored in on hover, does anyone have any suggestions for accomplishing this functionality?
I will explain how it works on that site:
There a colored image, and a canvas element. When the page is loaded, the image is drawn in canvas but desaturated. The original image is hidden. When you then hover over the canvas element, the colored image fades in.
This is a smart technique, but it can be done much simpler with just 2 images: one black&white and one in color.
Something like this:
HTML
CSS
#image_color {
display: none;
position: absolute;
left: 0px;
top: 0px;
}
#images {
position: relative;
}
JS
$("#images").hover(function(){
$("#image_color").fadeIn();
}, function(){
$("#image_color").fadeOut();
});
Best regards,
Rik
Why use 2 images ?
1 extra server requests.
You can achieve this with just jQuery and css.
or if you want to change just the opacity on hover:
$("img").css({ opacity: 0.5 }).hover(function() {
$(this).animate({ opacity: 1 });
}, function() {
$(this).animate({ opacity: 0.5 });
});
We did this on our sport grunge wp template if you’d like to check out the code.
Yes I should have specified I am looking for a solution that only uses 1 image and not two.
dtbaker saidWe did this on our sport grunge wp template if you’d like to check out the code.
Are you using just one image or 2?
SportTipsWorld saidWhy use 2 images ?
1 extra server requests.
You can achieve this with just jQuery and css.
or if you want to change just the opacity on hover:
$("img").css({ opacity: 0.5 }).hover(function() { $(this).animate({ opacity: 1 }); }, function() { $(this).animate({ opacity: 0.5 }); });
with pixastic is there a way to animate the color transition?
You could write a function to use the HSL function of that library to change only the saturation until it goes to zero.
You can use canvas to accomplish it. How about this?
http://demo.jeffrey-way.com/grey-color.html
(Guys - know of a faster way to do this, rather than manipulating each pixel??)
For IE you can then use filters because it doesn’t support canvas:
#cvs-src:hover {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
Nice 
only problem is IE 8. js Error.
document.getElementsByTagName(“canvas”)[0].getContext(‘2d’) is not supprted by IE7 or 8
Yeah - IE8 and below don’t support canvas. You could, as a fallback, use CSS filters.
To test for canvas support, you’d do:
var supportsCanvas = !!document.createElement('canvas').getContext;
supportsCanvas && (window.onload = greyImages);
A solution that works in IE is definitely a must for this particular project, what would be the best way of accomplishing a cross browser solution?
Thank you Jeffrey for posting that code, I will look at that in more detail to see how it works.
Use a polyfill, like this one: http://code.google.com/p/explorercanvas/
And then, you can use something like YepNope to load it. If I have some spare time in the next hour, I’ll update the code in my previous message.
Or, use IE filters.
JeffreyWay saidUse a polyfill, like this one: http://code.google.com/p/explorercanvas/
And then, you can use something like YepNope to load it. If I have some spare time in the next hour, I’ll update the code in my previous message.
An example would be very helpful, I am not in a huge rush for it, but if you could show something in your spare time I would really appreciate it. Thank you.
Okie dokie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
/* Setup...not important. */
.img-wrap {
width: 500px;
margin: 100px auto;
position: relative;
cursor: pointer;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
#cvs-src:hover {
filter: none;
}
</style>
</head>
<body>
<div class="img-wrap">
<img id="cvs-src" src="your-image.jpg" />
<canvas width=500 height=500></canvas>
</div>
<script>
(function() {
var supportsCanvas = !!document.createElement('canvas').getContext;
supportsCanvas && (window.onload = greyImages);
function greyImages() {
var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),
img = document.getElementById("cvs-src"),
imageData, px, length, i = 0,
grey;
ctx.drawImage(img, 0, 0);
// Set 500,500 to the width and height of your image.
imageData = ctx.getImageData(0, 0, 500, 500);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = red * .3 + green * .59 + blue * .11;
px[i] = px[i+1] = px[i+2] = grey;
}
ctx.putImageData(imageData, 0, 0);
}
})();
</script>
</body>
</html>
Kind of a bummer that you lose the fade effect in IE, I don’t know if this solution will work out for me after all, this site is going to be setup in WordPress and when the client uploads a featured image I want it to do the fade in from desaturated to color, I was hoping that could be accomplished without sprites because I can’t expect the client to setup sprites for all the images being uploaded. Here is an example of a site that is using the transition: http://ryancjonesphoto.com/ I am not sure how it is being accomplished though, maybe a second desaturated image is being dynamically generated? not sure.
Mike -
Your other options are:
- Use sprites
- Dynamically create a sprite with your server-side language of choice
- Use a JavaScript file, like excanvas, to bring canvas support to IE.