title: Compass transition opacity on background-image alone
body: <p>I want to make a background image 50% opaque on hover, and leave all other elements on the page as they were. Here's my SASS:</p>
  
  <pre><code>.background {
    div {
      @include background(image-url("background.jpg"));
      padding-bottom: 68.53%;
      @include transition-property(opacity);
      @include transition-duration(2s);
      @include transition-timing-function(ease-in);
      &amp;:hover {
        opacity: 0.5;
      }
    }
  
    #cover {
      @include background-size(cover);
    }
  }
  
  .intro {
    width: 100%;
    position: absolute;
    margin-top: 100px;
    left: 20%;
    padding-left: 10px;
    max-width: 650px;
  }
  
  h2.intro {
    font-size: 3.5em;
  }
  </code></pre>
  
  <p>And here's the html:</p>
  
  <pre><code>&lt;div class="intro"&gt;
    &lt;h2 class="intro"&gt;Introduction&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="anchor"&gt;
    &lt;div class="background"&gt;
      &lt;div id="cover"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently the transition itself works beautifully, but it also makes "Introduction" opaque, when I want opacity applied to the background image alone. What am I doing wrong?  </p>