title: Exclude an div element from background overlay
body: <p>Im trying to make a block with overlay hover effect (default: weak black background color - Hover: none black background) and an icon and text in the middle that stays in the same state all the way.</p>
  
  <p>How do i get the icon and text to stay in the same state (no hover effect)?</p>
  
  <p>Ive tried several rules to the overlay div and the icon div without any luck.</p>
  
  <p>Is there any css rule that provide some kind of exclusion?</p>
  
  <p>I managed to get it to work by adding them outside the divs that has overlay background, but it didnt work out well as the hover effect breaks when you hover over the icon and text. </p>
  
  <p>Here is the code: <a href="https://www.w3schools.com/code/tryit.asp?filename=FEMUM4N9T30Q" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FEMUM4N9T30Q</a></p>
  
  <pre><code>&lt;style&gt;
  .media-front-top-picture{
      background-image: url("");
      height:500px;
  }
       .media-front-top-icon{
          content: url(");
          width: 130px;
          margin: auto;
          padding-top: 200px;
          opacity: 1;
       }
       .media-front-txt{
          font-size: 22px;
          letter-spacing: 8px;
          color: white;
          margin-top: 15px;
       }
  .media-front-bottom-picture{
      background-image: url("h");
      height:500px;
  }
       .media-front-bottom-icon{
          content: url("");
          width:130px;
          margin: auto;
          padding-top: 200px;
       }
  
  .media-picture-container {
      position: relative;
  }
  .media-picture-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: .5s ease;
      background-color: rgba(0, 0, 0, 0.47);
  }
  
  .media-picture-overlay:hover {
    opacity: 0;
    cursor:pointer;
  }
  &lt;/style&gt;
  
  
  
  
  
  &lt;div class="body-media"&gt;
  &lt;div class="media-picture-container"&gt;
      &lt;div class="media-front-top-picture" style="border-bottom:4px solid white;"&gt;
      &lt;div class="media-front-top-icon"&gt;&lt;/div&gt;
      &lt;div class="media-front-txt"&gt;VIDEOS&lt;/div&gt;
      &lt;div class="media-picture-overlay"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="media-picture-container"&gt;
       &lt;div class="media-front-bottom-picture" style="border-bottom:4px solid white;"&gt;
       &lt;div class="media-front-bottom-icon"&gt;&lt;/div&gt;
       &lt;div class="media-front-txt"&gt;PICTURES&lt;/div&gt;
       &lt;div class="media-picture-overlay"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>