hover and changing the opacity of a div and an element
<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>