Question

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);
        }
    );

});

Answer 1

There is no ‘build-in’ solution for fading in/out a backgroundImage, but you may play around with chaining animate()

.animate({opacity: 0.5}, 1000)

for instance. Or use .css() aswell to just set a new opacity level.