Изменение полутонового свойства изображения на парении

Question

Я соединил скрипку с тем, что я сделал до сих пор: http://jsfiddle.net/U5pQs/

Я пытаюсь сделать парю над синей коробкой (#prompt) сделать две вещей: 1) изменить изображение (#picbw) дома, чтобы быть черным и белым 2) отображения DIV (#text) с текстом в нем над изображением

Вот код, у меня есть для этого перехода:

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

2) работает, но я не могу получить 1) случиться, и я не понимаю, почему!

Любая помощь очень ценится :)

Answer 1

Я думаю, что этот поток может быть полезно для U. Image Greyscale with CSS & re-color on mouse-over? Прочитайте это. Посмотрите эти ссылки. http://webexplorar.com/creating-grayscale-images-with-css/ http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Прочитайте это:

Мы использовали множество хаков в прошлом переход изображения от черно-белого до цвета в браузере. Один метод требует двух изображений, уложенных друг на друга. Другой вариант - использовать холст. Или ... мы можем использовать фильтр оттенков серого.

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

При применении в процентах к функции градаций серого, просто думать о себе, «По шкале от 0 до 100%, как серый цвет я хочу, чтобы это изображение было?

При использовании в тандеме с переходами CSS3 мы можем применить хороший и чистый эффект зависания.

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

В будущем, вы будете хотеть, чтобы обеспечить префиксы для других браузеров, однако, это не нужно в данный момент. Не нужно использовать переходы Mozilla для размещения фильтра, который реализован только в Webkit (пока).

Answer 2

Пример, который я нашел: http://jsfiddle.net/KDtAX/487/ имеет фильтр как для состояния зависания, так и для состояния, но «#prompt: hover ~ #picbw» ничего не делает для меня в любом случае. Когда я изменил это на «#picbw: hover» и объединил это с примером, с которым я связался, он сработал.

1) Ваш селектор CSS не работает: #prompt: парить ~ #picbw
2) Ваш CSS не работает, используйте CSS на примере
* и вам нужны все префиксы браузеров для 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%) 
}