title: Css animation to put a color layer over a background image while hovered
body: <p>I am trying to achieve the effect shown here: 
  <a href="https://css-tricks.com/almanac/properties/t/transition/" rel="nofollow">https://css-tricks.com/almanac/properties/t/transition/</a></p>
  
  <p>Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element. </p>
  
  <p>An example of which can be found here: 
  <a href="http://thefoxwp.com/portfolio-packery-4-columns/" rel="nofollow">http://thefoxwp.com/portfolio-packery-4-columns/</a></p>
  
  <p>I can get the transition part working with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    width: 150px;
    height: 150px;
    background: blue;
    &lt;!--background-image: url("http://lorempixel.com/380/222/nature");--&gt;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
  }
  
  .box:hover {
    background-color: black;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I am having trouble achieving it with a background image and making the white animation transparent over top of it. </p>