Show/hide image in each list individually with same class

I have a list of images that are used as links and at the bottom of each image there is another image to show/hide. So far all the images show at the same time because they have the same class.

Is there any way to get around that? I don't know how to give them all the unique ID.

    
        
        
        
        
        
        
    
     Click Picture for Family page

JavaScript:

$('.name').hide();

$(".first").hover(function() {
    $(".name").stop().show();

}, function() {
    $(".name").stop().hide();
});

You need to find the .name item that is in the same block of HTML as the one being hovered. One way to do that is to go up the parent chain from the one begin hovered to get the li tag and then use .find() from thereto find that .name item in that block. You can use this code to do that:

$('.name').hide();

$(".first").hover(function() {
    $(this).closest("li").find(".name").stop(true).show();
}, function() {
    $(this).closest("li").find(".name").stop(true).hide();
});

StackExchange Code Review Q#18771, answer score: 2