I am trying to create an image slider than when hovered over shows a div with text relating to the image...i'm confused as how to do this, I have tried a few things but I am stuck. Trying to learn JQuery, any help would be appreciated, here is the code:

Code JavaScript:
    //Image slider behaviour
    function rotateImages(currentImage) {
        var numberOfImages = $('#image-slider img').length;
        currentImage = currentImage % numberOfImages;
        $('#image-slider img').eq(currentImage).fadeOut(function() {
            $('#image-slider img').each(function(i) {
                    'zIndex', ((numberOfImages - i) + currentImage) % numberOfImages
            setTimeout(function() {rotateImages(++currentImage);}, 4000);
    //Image slider content div
    $('#image-slider').hover(function() {
        $('<div class="image-slider-content"></div>').css({
            width: '300px',
            height: '150px',
            backgroundColor: '#000000',
            position: 'absolute',
            zIndex: '50'