title: Add CSS inset box-shadow to parent element over the top of a child image
body: <p>I'm trying to add shadow to the parent object where an child <code>&lt;img&gt;</code> element is positioned inside it. I wan the inset shadow to overlap the image.</p>
  
  <p>My HTML code is:</p>
  
  <pre><code>&lt;section class="highlights"&gt;
      &lt;img src="images/hero.jpg" alt="" /&gt;
  &lt;/section&gt;&lt;!-- End section.highlights --&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.highlights {
      height: 360px;
      padding: 0;
      position: relative;
      overflow: hidden;
      opacity: 0.9;
  
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; 
  
      z-index:1;
  }
  .highlights img {
      height: auto;
      width: 100%;
      margin: 0 auto; 
      display: block;
      position: relative;
  }
  
  .highlights {
      -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
      box-shadow:  inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }
  </code></pre>
  
  <p>The shadow is not appearing for me. What did I do wrong?</p>