Grow your CSS skills. Land your dream job.

[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

    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

    Thanks Josh…I will have a look at these.

    # March 6, 2012 at 6:03 am

    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

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

    # March 6, 2012 at 8:24 pm

    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.

*May or may not contain any actual "CSS" or "Tricks".