title: Colour Overlay + Fade
body: <p>So I have a tumblr blog and I'd like to set it up so that all the image posts by default have a colour overlayed over the top (almost transparent) and then when you hover over it, it fades out completely to show the image's original colours. </p>
  
  <p>I've been looking for the right code but can't get anything to work. The below code successfully fades out from grayscale, but I don't want grayscale. I'm looking for something that will let me add a solid colour but transparent, and then fade that out. Any ideas? ;A;</p>
  
  <p>(the img is the property used for tumblr images in this CSS code)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      -webkit-filter: grayscale(100%);
      -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%);
      -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>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://i0.kym-cdn.com/photos/images/original/001/285/460/8b6.jpg" width="300px"&gt;&lt;/img&gt;</code></pre>
  </div>
  </div>
  </p>