title: :hover feature like Chrome Developer Tools
body: <p>I want to add a z-index of 1 on individual divs, buttons, and h1 that are underneath an overlay. I'm trying to make it similar to the chrome developer tools :hover feature. In Dev Tools, when you hover over an individual element, it highlights, however in my case, I'd like it to come above the overlay. In dev tools, you can highlight a child div without it's parent highlighting, and that's what I'm looking to do too. </p>
  
  <p>I've tried messing with opacity, but when it has a nested div, the nested div gets double the opacity and I don't want that. Here's the codepen and the code...</p>
  
  <p><a href="http://codepen.io/jareko999/pen/wWGpwz" rel="nofollow">http://codepen.io/jareko999/pen/wWGpwz</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="cover"&gt;
  &lt;/div&gt;
  
  &lt;h1 class="title"&gt;Here's your website&lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;button&gt;The Button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  
  .cover {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.4);
    z-index: 1;
  }
  
  .title {
    text-align: center;
    width: 60%;
    margin: 40px auto;
  }
  
  .container {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .box {
    width: 300px;
    height: 200px;
    margin: 10px;
    background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
    background-size: cover;
    display: flex;
  }
  
  button {
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    background: #276cd6;
    color: white;
    font-weight: 600;
    font-size: .8em;
    padding: 16px 24px;
    border-radius: 10px;
    margin: auto;
  }
  </code></pre>