title: hover and changing the opacity of a div and an element
body: <p>I am creating a box in html that contains a title, a background image, and a ghost div on top of it that appears on hover with a link.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div class = "box-wrapper"&gt;
    &lt;div class = "ghost-box"&gt;
      &lt;a class = "link-button"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class = "content-box"&gt;
      &lt;h3 class = "title"&gt;Title&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS looks like this:</p>
  
  <pre><code>.box-wrapper {display:inline-block;}
  .ghost-box {
    position:absolute;
    width: 300px;
    height: 100%;
    background-color: rgba(1, 81, 161, 0.9);
    opacity: 0;
    transition: all .3s ease;
  }
  .ghost-box:hover {opacity:1;}
  .content-box {
    width: 300px;
    height: 180px;
    background-image:url('example.jpg');
  }
  .title {
    opacity:1;
    transition: all .3s ease;
  }
  </code></pre>
  
  <p>My conundrum is, the hover transition on the ghost div works great, but I would also like to affect the "title" element as well. I don't want to decrease the opacity of the "content-box" because I want the background image to still show through the ghost div, but I want the title to change it's opacity to 0. I've tried several combinations of things from:</p>
  
  <pre><code>.content-box:hover:first-child {opacity:0;}
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>.box-wrapper:hover:last-child {opcaity:0;}
  </code></pre>
  
  <p>but nothing seems to be working. Any advice? I hope I made things clear enough.</p>