Small issue with JQuery script

Question

I have a list of images with overlays. When I mouseover the images, the text and the overlay is suppose to disappear using JQuery. When I hover over an image, the overlay for that specific image disappears, which is right. The problem is the text. When I hover over the image the text disappears for that image and on all the other images. I only want the text and the overlay for that specific image to hide. This seems to be a small issue, since I got the overlay to work right. Thanks in advance friends.

Here is the JQuery:

//Hides the screen and text on mouseover
$('.screen').mouseover(function() {
    $('.screen_text').hide();
    $(this).slideUp(400);

});
//Shows the screen and text on mouseout
$('.portfolio img').mouseout(function() {
    $('.screen_text').show();
    $('.screen').slideDown(400);

});

Answer 1

without seeing your html mockup, my assumption is that your jquery selector brings back all the text element (because you are doing $('.screen_text') ) I think what you want to do is something like:

$('.screen_text',this).hide();

which should only bring back the elements that has a class name screen_text in the context of this