title: SCSS how to show this result when mouse hover
body: <p>How do I code SCSS to show something like left image on hover.</p>
  
  <p><strong>HTML</strong>.</p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-6"&gt;
     &lt;div class="reference__content--item"&gt;
        &lt;img src="{{ asset($reference-&gt;photo-&gt;file) }}"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.reference {
     &amp;__content {
        margin-bottom: 30px;
        &amp;--item {
           background-color: transparent;
           img {
              margin-top: 30px;
              &amp;:hover {
                  background-color: #0000AA;
              }
           }
        }
     }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wWKB7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWKB7.png" alt="Example"></a></p>