Fade back DIV on hover- even when hovering over front DIV - html

Question

I'm looking for a CSS only solution to fade an image in a back DIV when hovering over any section of the DIV, including DIVs that are in front of it.
Here is what I've been able to build so far: http://jsfiddle.net/kqo10jLb/
The CSS:
#caseouter {
position: relative;
top: 0px;
}
#casewrap2 {
background-color: #000;
}
#casetitle {
font-size: 30px;
width: 100%;
display: block;
text-transform: uppercase;
text-align: center;
padding: 10px 0px 0px 0px;
color: #fff;
margin-bottom: 0px;
}
#casethumb {
width: 100%;
display: block;
margin-bottom: -100px;
opacity: 1;
transition: .2s opacity ease .2s;
height: 100px;
}
#casesecondline {
font-size: 30px;
color: #666;
text-transform: uppercase;
margin: 0 auto;
display: block;
width: 100%;
text-align: center;
color: #fff;
margin-top: -10px;
padding: 0px;
}
#casethumb img {
width: 100%;
}
#casethumb:hover {
opacity: .75;
}
#casetitle:hover ~ #casethumb a {
opacity: .75;
}
#casesecond:hover ~ #casethumb a {
opacity: .75;
}
And the HTML:
<div id="casewrap2">
<div id="casethumb">
<a href="www.google.com">
<img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
</a>
</div>
</div>
<div id="caseouter">
<a href="www.google.com">
<div id="casetitle">Headline</div>
<div id="casesecondline">Subheadline</div>
</a>
</div>
As you'll see, the back image fades on hover, however, it will not fade when I hover over the headline and subheadline text. I've tried using #casetitle:hover ~ #casethumb a but I'm obviously doing something wrong. Thanks!

Answer 1

Is this what you're after? http://jsfiddle.net/kqo10jLb/1/
I moved the caseouter into the casewrap2 object and changed the hover to this:
#casewrap2:hover #casethumb {
opacity: .75;
}