Css and Jquery Animation

Question

What I\'m trying to achieve is this animation

Link to the animation is Mat

Answer 1

I've made this jsfiddle

It may not be the prettiest code, but it does exactly what you want. If you want to add more expandable boxes, just change the img animation's left property in jquery. I would make it perfect, however this costs me more time. You can play with it as you wish.

HTML

    
 
    
                  
                

                    
Unicity Activate
                
            

    
    
 
    
                  
                

                    
Lean Complete
                
            

    
    
 
    
                  
                

                    
Bios Life D
                
            

    

CSS

    #product_list {
    text-align: center;
    position:relative;
    width:100%;
    margin:0px;
    padding:0px;
}
.tr {
    position:relative;
    margin:0px;
    border: 5px solid transparent;
}
.product-list .item {
    position: absolute;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.item-top img {
    width: 200px;
    height: 200px;
}
.item-bottom {
    padding: 8px;
}
.item-bottom .item-product-title {
    text-align:left;
}
.item a {
    color:black;
    text-decoration:none;
    background-color:blue;
}

JS

var myPadding = 10;
var myWidth = 0 - myPadding;
var myHeight = 0;
var numRows = $(".tr").length;
var allItemHeights = [];
var allItemWidths = [];
var allItemLefts = [];
var allItemsTextLefts = [];
var allItemsTextTops = [];
var parentBorderWidth = parseInt($(".tr").css("border-left-width"), 10);
for (var j = 0; j < numRows; j++) {
    var numItems = $(".tr:eq(" + j + ") .item").length;
    var parentPositionLeft = $(".tr:eq(" + j + ")").offset().left;
    for (var i = 0; i < numItems; i++) {
        var itemWidth = $(".item:eq(" + i + ")").outerWidth();
        $(".item:eq(" + i + ")").css({
            left: myWidth + parentPositionLeft + "px"
        });
        myWidth = myWidth + itemWidth + myPadding;
        thisHeight = $(".item:eq(" + i + ")").outerHeight();
        allItemHeights.push($(".item:eq(" + i + ")").height());
        allItemWidths.push($(".item:eq(" + i + ")").width());
        allItemLefts.push(parseInt($(".item:eq(" + i + ")").css("left"), 10));
        allItemsTextLefts.push($(".item:eq(" + i + ") .item-bottom").position().left);
        allItemsTextTops.push($(".item:eq(" + i + ") .item-bottom").position().top);

        if (thisHeight > myHeight) {
            myHeight = thisHeight;
        }
    }
    $(".tr:eq(" + j + ")").css({
        width: myWidth + "px",
        height: myHeight + "px"
    });
}
var openItem = false;
$('.item').click(function () {
    var par = $(this);
    var eq = $(".item").index(this);
    var left = allItemLefts[eq];
    var textLeft = allItemsTextLefts[eq];
    var textTop = allItemsTextTops[eq];
    if (!openItem) {
        par.css({
            zIndex: '9999'
        });
        par.animate({
            height: '300px',
            width: myWidth + 5 + 'px',
            left: -parentBorderWidth + "px"
        }, 500);
        $(".item:eq(" + eq + ") img").animate({
            "margin-left": -((myWidth / 2) + parentBorderWidth + myPadding) + "px",
            height: 300 + "px",
            width: 300 + "px"
        }, 500);
        $(".item:eq(" + eq + ") .item-bottom").css({
            position: "absolute",
            left: textLeft + "px",
            top: textTop + "px"
        });
        $(".item:eq(" + eq + ") .item-bottom").animate({
            left: 300 + 20 + "px",
            top: 20 + "px"
        }, 500);
        openItem = true;
    } else {
        par.animate({
            height: allItemHeights[eq] + 'px',
            width: allItemWidths[eq] + 'px',
            left: left + "px"
        }, 500, function () {
            par.css({
                zIndex: '0'
            });
        });
        $(".item:eq(" + eq + ") img").animate({
            "margin-left": 0 + "px",
            height: 200 + "px",
            width: 200 + "px"
        }, 500);
        $(".item:eq(" + eq + ") .item-bottom").animate({
            left: textLeft + "px",
            top: textTop + "px"
        }, 500);
        openItem = false;
    }
});