Let's say I have a grid containing a variety of thumbnails. My goal is to have each thumbnail initially visible as grayscale, but when hovered...transfer to full color. I did come across some jQuery methods that can solve this problem rather easily - however - I would like to adjust the black/white of the images in PhotoShop manually rather than using the calculated desaturation, formulated by javascript (sometimes the contrast is weak).
With that said, could anybody suggest a solution for using 2 images (color, gray) for the rollovers? I would prefer to contain the grayscale version within a css document if possible. Let's say there are 20 images.
Alternatively you could have them semi transparent as this might give the illusion of desaturation, I've used that trick previously. Then you set the :hover event to have full opacity.
Thanks Andy. Here is a nice one too. The code is a bit more robust, however it's nice for working with a large collection of images. An original color version of the image is all that is needed - the code does all the converting to grayscale.
I was wondering If anybody has a solution for Grayscale to Color Rollovers using only CSS3. I came across a method a while ago on the net tuts site, but the browser support was extremely limited (Chrome Canary).
Here is the link for that: http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
Any suggestions would be great.
Thanks.
Let's say I have a grid containing a variety of thumbnails. My goal is to have each thumbnail initially visible as grayscale, but when hovered...transfer to full color. I did come across some jQuery methods that can solve this problem rather easily - however - I would like to adjust the black/white of the images in PhotoShop manually rather than using the calculated desaturation, formulated by javascript (sometimes the contrast is weak).
With that said, could anybody suggest a solution for using 2 images (color, gray) for the rollovers? I would prefer to contain the grayscale version within a css document if possible. Let's say there are 20 images.
Thank You.
CSS - http://jsfiddle.net/joshnh/LSE7n/
jQuery - http://jsfiddle.net/joshnh/rkWks/
http://webdesignerwall.com/demo/html5-grayscale/
Cross browser CSS Grayscale: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
Or this:
http://www.w4schools.org/css-grayscale-images-11.html