title: css transition opacity fade background
body: <p>I am doing a <code>transition</code> where it fades into transparent white, when a user is hovering an image. </p>
  
  <p>My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding <code>background:black;</code> to the class that contains the <code>transition</code>, but it does not work unfurtunately, it's still fading into white transparent.</p>
  
  <p>The css code I am using is:</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>.hover:hover {
    opacity: 0.2;
  }
  
  .item-fade {
    background: black;
    opacity: 0.8;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Hover image, the white opacity needs to be black :/&lt;/p&gt;
  &lt;img src="//placehold.it/100x100" class="hover item-fade" /&gt;</code></pre>
  </div>
  </div>
  </p>