title: Sibling element inheriting opacity?
body: <p>I'm working on a site right now where I've got to have some images that, on hover, dim and display some text (price, item name, etc.). So I've got a  for the wrapper, and then a  for the image itself and a  for the overlay text. The image div and the overlay div are children of the wrapper.</p>
  
  <p>The wrapper has position: relative, and the image and overlay have position: absolute. The image div has a z-index of 10, and the overlay a z-index of 0. On hover, the image dims to 50% opacity, and the text appears, just like it should. Except... wherever the text is in contact with the image, it also has 50% opacity. Text outside of the image has normal opacity.</p>
  
  <p>How do I make it so that all of the text has an opacity of 1?</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;section class="first-section"&gt;
            &lt;div class="outfitcontainer"&gt;
              &lt;div class="outfit"&gt; 
                &lt;img src="purelyoutfit1.png" width="100%" height="100%"/&gt;
              &lt;/div&gt;
              &lt;div class="overlay"&gt;
                &lt;p class="price"&gt;$350&lt;s&gt; $4200&lt;/s&gt;&lt;/p&gt;
                &lt;p class="item"&gt;FURR COAT&lt;/p&gt;
                &lt;p class="designer"&gt;Antonio Marras&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.first-section {
    width: 80%;
    margin-left: 10%;
    background-color: #FFFFFF;
    height: auto;
  }
  
  .outfitcontainer {
    position: relative;
    float: left;
    width: 20%;
    height: auto;
    background-color: #FFFFFF;
    margin: 25px;
  
  }
  .outfit, .overlay {
    position: absolute;
    width: 200px;
    height: auto;
    top: 0;
    left: 0;
  }
  
  .outfit {
    z-index: 10;
    background-color: white;
  }
  .outfit:hover {
    opacity: .5;
    cursor: pointer;
  }
  .overlay {
    z-index: 0;
    text-align: center;
    font-weight: bold;
  }
  .overlay p {
    display: block;
    padding: 30px 0;
    color: black;
  }
  </code></pre>