How can I make the opacity of an image stay 0.35 when you hover over to another div?

Question

What I've got is an image inside a div and when you hover over the image, another div pops up from the bottom and at the same time the image opacity goes down to 0.35. But when you hover over to the div that pops up, the opacity of the image goes straight 1 again, and I want it to stay at 0.35 as long as the other div is up. I hope my question is clear.

This is the html code

<div class="f1">
    <div class="f2">TEXT</div>
    <div class="image">
    <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200" />
    </div>
    </div>

Here's the fiddle

Answer 1

See an updated fiddle:

http://jsfiddle.net/4LkD7/5/

I just changed the hover CSS, so the :hover is applied to the .f1 element it self and applies the opacity to the img child element.

 .f1:hover img {
     opacity: 0.35;
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
 }

Answer 2

You should better use

.f1:hover > #imagename{
opacity: 0.35;
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
}

So that it will only affect the specific image.