title: BEM with SASS and :hover
body: <p>What's the proper way of declaring active/focus/hover states using BEM with SASS? For example, I have this structure:</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;img class="card__image" src="..." alt=""&gt;
      &lt;div class="card__overlay"&gt;
          &lt;div class="card__title"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>And the SCSS:</p>
  
  <pre><code>.card {
     &amp;__image {
     }
  
     &amp;__overlay {
     }
  
     &amp;__title {
     }
  }
  </code></pre>
  
  <p>And I want to modify the elements when hovering on the block.
  This doesn't work:</p>
  
  <pre><code>.card {
     &amp;__overlay {
         display: none;
     }
  
     &amp;:hover {
         &amp;__overlay {
             display: block;
         }
     }
  }
  </code></pre>
  
  <p>And having to write the whole <code>.project__image</code> just for this one instance seems wrong.</p>
  
  <p>Is there any other way to accomplish this?</p>