如何制作这个特效

原来是这样的

点击红框后

JS应该怎么写
尝试这汇总写法！
http://jsfiddle.net/18932t45/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function (){
$('.block').eq(1).click(function(event) {
$('.block').eq(1).width(400)
});
})

</script>
<style>
.fl{float: left;}
.content{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    border:1px solid #cccccc;
    margin-top: 150px;
    text-align: center

}
.content .block{
    width: 300px;
    height: 300px;
    background-color: green;
    margin: 10px;
}
.content .block .main{
    text-align: center;
}
.content .block .block{
    width: 300px;
    height: 300px;
    background-color: grey;
    margin: 10px;
}

</style>

</head>
<body>
<div class="content">
<div class="block fl">
<div class="main">asda</div>
</div>
<div class="block fl">
<div class="main"></div>
</div>
<div class="block fl">
<div class="main"></div>
</div>
</div>
</body>
</html>

但是效果不是我想要的！
求教应该如何布局与编写

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/170928