calling a function - selector problem

calling a function - selector problem

When I trigger .thumbnail:hover span CSS, i want to do a function that shows the .overlay class. Here's what I have and i does NOT work. Any help?? Thanks in advance.

Script:
  1. $(document).ready(function(){
            $('.thumbnail:hover')(
                function() { $('.overlay').show() });
               
        });



CSS:
  1. --- start css ---
    /*POPup Image*/
    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #ffffff;
    padding: 5px;
    left: -1000px;
    border: 0px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
        visibility: visible;
        top: -100px;
        left: -450px;

    }