Javascript - How to turn this into a simple function

$(document).ready(function()
    {
        // $('.pull-me').click(function()
        // {
        //     $('.login').slideToggle('slow')
        // });

        $('#thumbnail1').mouseenter(function()
        {
            $('#thumbnailTitle1').css('visibility', 'visible')
        });
        $('#thumbnail1').mouseleave(function()
        {
            $('#thumbnailTitle1').css('visibility', 'hidden')
        })


        $('#thumbnail2').mouseenter(function()
        {
            $('#thumbnailTitle2').css('visibility', 'visible')
        });
        $('#thumbnail2').mouseleave(function()
        {
            $('#thumbnailTitle2').css('visibility', 'hidden')
        })


        $('#thumbnail3').mouseenter(function()
        {
            $('#thumbnailTitle3').css('visibility', 'visible')
        });
        $('#thumbnail3').mouseleave(function()
        {
            $('#thumbnailTitle3').css('visibility', 'hidden')
        })
    });

I'm very new to Javascript but am trying to learn. I aware this is jQuery but would like to know if there is a quicker way to do this code, like create a smaller function that i can call up to display/hide the text.

Because i will be adding more thumbnails and i don't want to have to write it all out for every photo and text that i display on the photo.