title: Hide image until hover
body: <p>I've been at this a while now and can't seem to get the behavior I'm looking for.</p>
  
  <p>Bare bones here is what I have:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
  &lt;div class="container"&gt;
      &lt;li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;"&gt;
        &lt;div class="txt-container"&gt;
          &lt;a&gt;Title&lt;/a&gt;
          &lt;p&gt;Desc&lt;/p&gt;
        &lt;/div&gt;
        &lt;a class="btn"&gt;Button&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The background image url has to be done as part of the HTML because I am looping through a list of items, each item has an image property. The above image url is an example image. In actual code it is <code>{{ item.image }}</code>, which can only be accessed via HTML.</p>
  
  <p>CSS</p>
  
  <pre><code>.preview-image {
    opacity: 1;
  } 
  .container:hover .preview-image {
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .container:hover .txt-container {
    opacity: 0;
  }
  .txt-container {
    opacity: 1;
    font-weight: bold;
    color: white;
  }
  .btn {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  }
  </code></pre>
  
  <p>This <a href="http://jsfiddle.net/coq9sdxu/" rel="nofollow noreferrer">fiddle</a> is close to what I want. I want the bg image to take up the entire <code>li</code>. I only want the image visible on hover of the <code>li</code> (or containing element). While hovering, the <code>Title</code> and <code>Desc</code> should be hidden so they do not interfere with the viewing of the image. The <code>Button</code> should stay visible at all times. The result I'm looking for is exactly the behavior of this fiddle, except the image is only seen on hover.</p>
  
  <p>I can't just set the opacity or visibility on the <code>li</code> itself since it has multiple classes on it. I only want the visibility to affect the background image. I also have tried making a <code>div</code> and placing it inside the <code>li</code>, but I can't get it to fill the <code>li</code> space anymore. Is there a way I can do this?</p>