I have a thumb nail inside another div, when the thumbnail is hovered I want the parent div to fade/transition to the background of the thumbnail, then fade back to the original image after hover.

I have this so far which changes the parent background to that of the thumbnail and back but with no transition.

$(document).ready(function() {

    var originalBG;
    var hoverBG;
    $(".alt-img").hover(
        function () {
            originalBG = $(this).parent().css('backgroundImage');
            hoverBG = $(this).css('backgroundImage');
            $(this).parent().css('backgroundImage',hoverBG);
        }, 
        function () {
            $(this).parent().css('backgroundImage',originalBG);
        }
    );

});