Div over image and mouseover event

Question

I have a site with images and some of them have a "play" (a div positioned absolutely and managed via click event on jQuery) over it.

In some images I must to change the opacity when the mouse is over the image.

When an imagen have at same time the "play" and the opacity change, this is happening (place the mouse over the "play" div): http://jsfiddle.net/S53b5/

I have tried different solutions only CSS or using jQuery, but anything works :(

Thanks!

Answer 1

try this demo

   $("img").mouseout(function(){
     $(".play").css("opacity","1")
    }).mouseover(function(){
     $(".play").css("opacity",".5");
    });

Updated Demo2

$("img").mouseout(function(){
        $(".play").css("opacity","1");
         $(this).css("opacity",".1");
    }).mouseover(function(){
        $(".play").css("opacity",".5");
        $(this).css("opacity","1");
    });

$(".play").mouseover(function(){
        $(this).css("opacity","1");
        $("img").css("opacity","1");
    });

Answer 2

$("img").mouseover(function(){
    $(this).css("opacity",".8");
})

Answer 3

$("#(yourimageid)").mouseover(function(){
$(this).css("opacity","0.7")
})