title: In next.js, using css, how do I target a child element when its parents is hovered over?
body: <p>This is the css that targets the child element, "#overlay", when the parent, ".collection", is hovered.</p>
  
  <pre><code>.collection {
      position: relative;
      overflow: hidden;
  }
  
  .collection:hover #overlay { 
      position: absolute;
      opacity: .3;
  }
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>import styles from "./Home.module.css";
  
  &lt;div className={`${styles.collection} card`}&gt;
      &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The properties are not applied to the child element when the parent is hovered.</p>