一个挺好看的分类展示效果

最近浏览网站的时候发现国外的一个网站分类展示的效果挺不错，这里简单分享一下怎么实现
原网址在这里：http://minimalmonkey.com/
页面效果类似这样

html 内容:

<div class="section" id="section1">
   <div class="panels">
       <ul>
           <li class="navy">
               <div class="content">
                   <div class="fixed">
                       <h1>Transition and old browsers</h1>
                       <span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
                   </div>
                   <span class="small read">Read Article</span>
               </div>
               <div class="color"></div>
           </li>
           <li class="red">
               <div class="content">
                   <div class="fixed">
                       <h1>Transition and old browsers</h1>
                       <span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
                   </div>
                   <span class="small read">Read Article</span>
               </div>
               <div class="color"></div>
           </li>
           <li class="lime">
               <div class="content">
                   <div class="fixed">
                       <h1>Transition and old browsers</h1>
                       <span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
                   </div>
                   <span class="small read">Read Article</span>
               </div>
               <div class="color"></div>
           </li>
       </ul>
   </div>
</div>

css 内容 (基本上都是靠css 实现)：

#section1 .panels{
    position: absolute;
    height: 100%;
    top: 0;
    background-color: inherit;
    bottom: 0;
    display: block;
    min-height: 460px;
    position: relative;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    width: 100%;
    z-index: 2;
}
#section1 ul{
    height: 100%;
    overflow: hidden;
    display: flex;
    min-height: 460px;
    width: 1020px;
}
#section1 li{
    width: 280px;
    color: #fff;
    position: relative;
    /* -webkit-transition: background-color .35s,color .35s,margin .45s,-webkit-transform .5s;
    transition: background-color .35s,color .35s,margin .45s,transform .5s; */
    padding: 45px 30px;
    cursor: pointer;
}
#section1 li .content {
	-webkit-transition:opacity .45s;
	transition:opacity .45s;
    z-index:4;
    position: relative;
}
#section1 li .fixed {
	padding:44px 38px 68px
}
#section1 .fixed h1{
    font-size: 45px;
    line-height: 45px;
    margin: 0;
}
#section1 .excerpt {
    display: block;
    font-size: 15px;
    line-height: 23px;
    opacity: .5;
    margin-top: 28px;
    -webkit-transition: opacity .35s;
    transition: opacity .35s;
}
#section1 .read {
    display: block;
    font-size: 12px;
    padding: 0 38px;
    text-transform: uppercase;
    top: 85vh;
    display: block;
    position: absolute;
}
#section1 .color{
    background-color: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    width: 100%;
}
/* acitve */
#section1 li:hover .excerpt{
	opacity:1
}
#section1 .expand .color {
	-webkit-transform:scaleX(1.15625)translate3d(0,0,0);
    transform:scaleX(1.15625)translate3d(0,0,0);
    z-index: 3;
}
#section1 ul.hover .navy{background: #082139;color: #666}
#section1 ul.hover .red{background: #5c1e1e;color: #666}
#section1 ul.hover .lime{background: #414f4d;color: #666}
/* 下载下main权限高于上面样式 */
#section1 li.navy,#section1 li.navy:hover{background: #16528e;color:#fff}
#section1 li.lime,#section1 li.lime:hover{background: #a2c5bf;color:#fff}
#section1 li.red,#section1 li.red:hover{background: #e54b4b;color:#fff}

js 内容：

$('#section1 li').hover(function(){
    $(this).addClass("expand");
    $(this).parent().addClass('hover');
},function(){
    $('#section1 li').removeClass("expand");
    $(this).parent().removeClass('hover');
})

这里主要有两部分要注意：

第一：color 节点

这里的color 节点，作用就是hover 的时候撑开宽度

<div class="color"></div>

主要的样式有以下几个：

background-color: inherit;

-webkit-transform:scaleX(1.15625)translate3d(0,0,0);
    transform:scaleX(1.15625)translate3d(0,0,0);

第二：z-index 层级

.panels ： z-index: 2;
.content ： z-index:4;
.color ： z-index: 3;

只要弄懂以上2点起到什么作用基本上就没什么大问题了。

对了，这里还要提一句，展示列在鼠标悬停的时候其他列会被置暗，我的习惯逻辑是布一层遮罩，开始我也是这么去操作的。但是完成的时候总会有一点卡顿，没有原网站上那么圆润，看了下代码，发现它是通过调整成较暗的背景颜色和字体来实现的。。。优秀，又学到一门手艺。

js部分

点击打开详情页这个过渡效果看上去也很nice，应该是通过 jquery+requireJS+backbone 来操作的，感觉代码质量还是可以的，借鉴意义挺高，有时间可以去研究一下。