﻿// image rollover plugin for any images you want to display a title from underneath the image

    $.fn.imgRoll = function () {

        var imgPlace = $('a > img', this).css('top');               // get the original setting of the image
        var titlePlace = $('span', this).css('bottom');         // get the original setting of the title

        $(this).hover(function () {

            $('a > img', this).stop().animate({                     // bump the image up
                top: '-23'
            }, 100);
            $('span', this).fadeIn(100);                        // fade in the title when it comes out of hiding
            $('span', this).animate({                           // slide the link down
                bottom: '4'
            }, 100);

        }, function () {

            $('a > img', this).stop().animate({                     // move the image back
                top: imgPlace
            }, 100);
            $('span', this).fadeOut(100);                       // fade out the text when it goes into hiding
            $('span', this).animate({                           // slide the text back up and hide it
                bottom: titlePlace
            }, 100);
        });

    };

