title: Show / Hide background image of div on hover
body: <p>I'm currently trying to figure out if it is at all possible to show and hide the background image on a div with a hover state.<br>
  Here's some code:
  HTML</p>
  
  <pre><code>&lt;div class="thumb"&gt;
      &lt;div class="text"&gt;
          Header&lt;br&gt;
          Sub-header&lt;br&gt;&lt;br&gt;
          Date
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="thumb"&gt;
      &lt;div class="text"&gt;
          Header&lt;br&gt;
          Sub-header&lt;br&gt;&lt;br&gt;
          Date
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="thumb"&gt;
      &lt;div class="text"&gt;
          Header&lt;br&gt;
          Sub-header&lt;br&gt;&lt;br&gt;
          Date
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.thumb {
      width: 400px;
      height: 250px;
      background-color: silver;
      font-weight: bold;
      background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  .text {
      padding: 15px;
  }
  </code></pre>
  
  <p>So essentially I want to alternate between a background image and the background color, so when you hover over the div the background image is show, and on mouseout the background image is hidden and you revert to the background colour (silver).<br>
  I found this was do-able via pseudo classes but as this is for a CMS site the images will be changed on the fly, therefore they'll have to be inserted via html:<br></p>
  
  <pre><code>style="background-image: url('insert url here')"
  </code></pre>
  
  <p>Is this at all possible to hide and show the background-image?</p>