title: show background-image on mouse over
body: <p>I have the folowing HTML:</p>
  
  <pre><code>&lt;a href="#" class="home-block" style="background-color:#464646; background-image:url('wardrobe.jpg')"&gt;Wardrobe&lt;/a&gt;
  &lt;a href="#" class="home-block" style="background-color:#6a0d1f; background-image:url('wine.jpg')"&gt;Wine&lt;/a&gt;
  &lt;a href="#" class="home-block" style="background-color:#291407; background-image:url('coffee.jpg')"&gt;Coffee&lt;/a&gt;
  </code></pre>
  
  <p>This is the relevant CSS:</p>
  
  <pre><code>.home-block {
      background-color: #c2b89c; display: block; height: 180px; line-height:180px;
      text-align: center; font-size: 70px; color:#e2e2e2;
      text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
      background-position: center center; box-shadow: 1px 1px 4px #111;
  }
  </code></pre>
  
  <p>My result now looks something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/dC9B0.jpg" alt="enter image description here"></p>
  
  <p>That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:</p>
  
  <p><img src="https://i.stack.imgur.com/11Zuh.jpg" alt="enter image description here"></p>
  
  <p>Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using <code>background-size: cover</code>. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.</p>
  
  <p>So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.</p>
  
  <p>What I have tried is this:</p>
  
  <pre><code>.home-block { background: none; }
  .home-block:hover { background: inherit }
  </code></pre>
  
  <p>but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.</p>