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:
$(document).ready(function(){
 
    //Image slider behaviour
    rotateImages(1);
 
    function rotateImages(currentImage) {
        var numberOfImages = $('#image-slider img').length;
        currentImage = currentImage % numberOfImages;
 
        $('#image-slider img').eq(currentImage).fadeOut(function() {
            //Z-index
            $('#image-slider img').each(function(i) {
                $(this).css(
                    'zIndex', ((numberOfImages - i) + currentImage) % numberOfImages
                );
            });
 
            $(this).show();
            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'
        }).appendTo('#image-slider');
    });
});