Question

I currently have a div with a image overlaid that I am currently using the following code to fadeout the image to show the text in the element underneath:

$(".Content_Frame_Image").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

However because im only making it invisible I cant get the links to work underneath, you can see a sample here http://playing.everythingcreative.co.uk

If I use the fadeout method then it wont fadein on hover…

Answer 1

what’s about:

$(".Content_Frame_Container")
    .each(function(){
        $(this).find('.Content_Frame_Image');
    })
    .hover( 
        function(){
            $(this).find('.Content_Frame_Image').stop().fadeOut('slow');
        }, 
        function(){
            $(this).find('.Content_Frame_Image').stop().fadeIn('slow');
        }
    );

tested it with chrome dev-tools — should work nicely.