Change an image's grayscale property on hover

Question

I've put together a fiddle with what I've done so far: http://jsfiddle.net/U5pQs/

I'm trying to make hovering over the blue box (#prompt) do two things: 1) change the image (#picbw) of the house to be black and white 2) display a div (#text) with text in it over the image

Here's the code I have for this transition:

#prompt:hover ~ #picbw {filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);}

2) works, but I can't get 1) to happen and I don't understand why!

Any help greatly appreciated :)

score 2 · Answer 1 · answered Mar 27 '13 at 17:00

The example I found: http://jsfiddle.net/KDtAX/487/ has the filter for both the hover state and off state, but "#prompt:hover ~ #picbw" doesn't do anything for me either way. When I changed that to "#picbw:hover" and combined that with the example that I linked to, it worked.

1) Your css selector doesn't work: #prompt:hover ~ #picbw
2) Your css doesn't work, use the css from the example
* and you need all the browser prefixes for the css3

#picbw {
    ...
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
#picbw:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -moz-filter: grayscale(100%)
}

Thanks Jason. The functionality in the example is good - I'll use that. It's a shame a different div can't change the grayscale of the image though. — dullard, Mar 28 '13 at 11:56
Well, there is always a way. Using css there would need to be a child/parent relationship. Otherwise, you could use JS. — Jason Lydon, Apr 03 '13 at 16:04

score 1 · Answer 2 · edited May 23 '17 at 10:25

I think that this thread can be usefull for U. Image Greyscale with CSS & re-color on mouse-over? Read this. Check this links to. http://webexplorar.com/creating-grayscale-images-with-css/ http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Read this:

We’ve used a variety of hacks in the past to transition an image from black and white to color in the browser. One technique calls for two images stacked on top of one another. Another option is to use canvas. Or… we can use the grayscale filter.

 img {
   -webkit-filter: grayscale(100%);
 }

When applying a percentage to the grayscale function, just think to yourself, “On a scale of 0 to 100%, how gray do I want this image to be?

When used in tandem with CSS3 transitions, we can apply a nice and clean hover effect.

 img {
   -webkit-transition: -webkit-filter 1s;
     }
 img:hover {
  -webkit-filter: grayscale(100%); 
     }

In the future, you’ll want to provide prefixes for the other browsers, however, it’s not necessary at this point. No need in applying Mozilla transitions to accomodate for a filter that’s only implemented in Webkit (so far).

Thanks Mayk. I'll look into this further. – dullard Mar 28 '13 at 11:56 — dullard, Mar 28 '13 at 11:56

Change an image's grayscale property on hover

2 Answers2