Javascript Img在单击时扩展到100%（并且仍然坚持网格）

这就是我正在处理的问题：

我希望它能做到以下几点：

当您单击任何图像时，如果上面有一个图像，它将展开 扩展图像；然后，小图像将被推到 展开图像。 此外，当您单击一个图像时，上一个展开的图像会收缩 原尺寸的50%

我想与某种网格一起工作。所有的图像都在进行中 具有相同的尺寸比。我已经试着与：在获得 这是两个柱网，每个柱网底部和中部之间有20px 图像，但没有结果

尝试一下：

http://jsfiddle.net/wppjq1a3/2/

我没有将css添加到jquery中，而是切换了一个类。我添加了一个红色的背景色，这样当你在悬停上区分时，因为不透明度被调低了，我想确保我单击的div出现在前面。我还添加了一个绝对位置和一个z-

jQuery：

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).toggleClass("expand");
    });
});

CSS:

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).toggleClass("expand");
    });
});

.expand{
    width:100% !important;
    height:100% !important;
    position: absolute;
    z-index:999999 !important;

}