title: Change an image's grayscale property on hover
body: <p>I've put together a fiddle with what I've done so far: <a href="http://jsfiddle.net/U5pQs/" rel="nofollow">http://jsfiddle.net/U5pQs/</a></p>
  
  <p>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</p>
  
  <p>Here's the code I have for this transition: </p>
  
  <pre><code>#prompt:hover ~ #picbw {filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
              -o-filter: grayscale(100%);}
  </code></pre>
  
  <p>2) works, but I can't get 1) to happen and I don't understand why!</p>
  
  <p>Any help greatly appreciated :)</p>