title: Hover Effect On Iframe
body: <p>I am creating a monotone Wordpress blog where images and iframes (Youtube) change from monotone to colour on hover.</p>
  
  <p><a href="http://amitoooldforclubbing.co.uk/" rel="nofollow">http://amitoooldforclubbing.co.uk/</a></p>
  
  <p>I've had no problem for the images:</p>
  
  <pre><code>img {
  -webkit-filter: grayscale(100%);
  z-index: -9999999999999999999999999px;
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  }
  
  img:hover {
  -webkit-filter: grayscale(0%);
  z-index: -9999999999999999999999999px;
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  }
  </code></pre>
  
  <p>This works fine.</p>
  
  <p>However when I try to do the same for iframes, it doesn't work.  Changing it to greyscale does - but the hover effect does not work.</p>
  
  <p>Any idea?</p>
  
  <pre><code>iframe {
  -webkit-filter: grayscale(100%);
  z-index: -9999999999999999999999999px;
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  }
  
  iframe:hover {
  -webkit-filter: grayscale(100%);
  z-index: -9999999999999999999999999px;
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  }
  </code></pre>
  
  <p>Thanks
  James</p>