All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

[Solved] Grayscale to Color Rollovers CSS3?

  • # March 6, 2012 at 2:17 am

    Hello All,

    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.

    # March 6, 2012 at 2:18 am

    Can’t do it with CSS. Here’s a suggestion: http://www.pixastic.com/lib/

    # March 6, 2012 at 2:27 am

    @TheDoc unless you are using Chrome Canary:

    -webkit-filter: grayscale(100%);
    # March 6, 2012 at 2:42 am

    you can use the photo in grey scale and/or luminosity and the colored photo and you can swap on mouseover…it’s also a suggestion

    # March 6, 2012 at 3:55 am

    This reply has been reported for inappropriate content.

    Ok.

    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.

    # March 6, 2012 at 4:02 am

    Here are a couple of solutions I have done for others in the past:

    CSS – http://jsfiddle.net/joshnh/LSE7n/
    jQuery – http://jsfiddle.net/joshnh/rkWks/

    # March 6, 2012 at 4:21 am

    This reply has been reported for inappropriate content.

    Thanks Josh…I will have a look at these.

    # March 6, 2012 at 6:03 am

    This reply has been reported for inappropriate content.

    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.

    # March 6, 2012 at 6:06 am

    This reply has been reported for inappropriate content.

    Edit: Just found a handy link that can do this in JQuery: JQuery Grayscale Hover

    # March 6, 2012 at 8:24 pm

    This reply has been reported for inappropriate content.

    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.

    http://webdesignerwall.com/demo/html5-grayscale/

    # November 1, 2012 at 6:04 pm

    Cross browser CSS Grayscale: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

    # June 26, 2014 at 10:56 am

    Or you can try this

    http://jsfiddle.net/LSE7n/174/

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed