Dual hover-effects for nested list items in CSS

[admin]

I'm trying to get different hover effects for list items.

My list is image and title (both being pulled from wordpress) - I want the background box for the title to change color on hover (parent Li) and an effect applied to the image (I've used opacity in the js fiddle example).

Here's a <a href="http://jsfiddle.net/fabs999/fzUbt/" rel="nofollow noreferrer">jsfiddle</a>

<li id="item" class="item">
        <a href="#"><img src="http://placekitten.com/g/200/300"/></a>
          <br />
        <a href="#" class="p_title">Entry 6</a>
</li>

Situation 1: Hover over the image, everything works as I would like it too.

Situation 2: Hover over the black box only, and you get a different effect.

<strong>I would like Situation 2 result = Situation 1 result.</strong>

I've looked at the following on Stack overflow, but no luck.
<a href="https://stackoverflow.com/questions...when-not-hovering-jsfiddle-link-included?rq=1">link 1</a>
<a href="https://stackoverflow.com/questions/1817575/css-hover-parentchild-items">link 2</a>
<a href="https://stackoverflow.com/questions...nested-list-item-for-a-fade-effect-using-css3">link 3</a>
<a href="https://stackoverflow.com/questions/11675923/hover-on-nested-item-can-affect-its-parent">link 4</a>

Please help!
I thought it was my markup, but I've changed it a few times and that didn't fix it.

Any pointers in the right direction would be appreciated. I was set on CSS-only, but if java script fixes it, then that's great too.

Thanks

Fabs