$(document).ready(function(){
$('.shadow').css('background', '#000').css('opacity', 0.8);
$('#fig1').hover(
    function(){
        $('#fig1').animate({
            height: "450px",
        }, 500 );
        $('#fig1 .shadow').animate({
            opacity: 0,
        }, 500 );
        $('#fig1 .descr').animate({
            top: "150px",
            opacity: 1,
        }, 500 );
        $('#fig2').animate({
            height: "200px",
        }, 500 );
        $('#fig3').animate({
            height: "200px",
        }, 500 );
    },
    function(){
        $('#fig1').animate({
            height: "150px",
        }, 500 );
        $('#fig1 .shadow').animate({
            opacity: 0.8,
        }, 500 );
        $('#fig1 .descr').animate({
            top: "250px",
            opacity: 1,
        }, 500 );
        $('#fig2').animate({
            height: "500px",
        }, 500 );
        $('#fig3').animate({
            height: "500px",
        }, 500 );
    }
);
$('#fig2').hover(
    function(){
        $('#fig2').animate({
            width: "700px",
        }, 500 );
        $('#fig2 .shadow').animate({
            opacity: 0,
        }, 500 );
        $('#fig3').animate({
            width: "150px",
        }, 500 );
    },
    function(){
        $('#fig2').animate({
            width: "425px",
        }, 500 );
        $('#fig2 .shadow').animate({
            opacity: 0.8,
        }, 500 );
        $('#fig3').animate({
            width: "425px",
        }, 500 );
    }
);
$('#fig3').hover(
    function(){
        $('#fig3').animate({
            width: "700px",
        }, 500 );
        $('#fig3 .shadow').animate({
            opacity: 0,
        }, 500 );
        $('#fig2').animate({
            width: "150px",
        }, 500 );
    },
    function(){
        $('#fig3').animate({
            width: "425px",
        }, 500 );
        $('#fig3 .shadow').animate({
            opacity: 0.8,
        }, 500 );
        $('#fig2').animate({
            width: "425px",
        }, 500 );
    }
);
});