今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
下面来看看html，我们用ul、li来布局案例，我们需要一个图像盒子和一个图像描述的盒子。
<div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">KungFu Panda</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Toy Story 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Wall-E</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Up</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Cars 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> </a> </li> </ul> </div>接下来，我们来看看CSS的写法，这里我们用到了normalize.css和prefix free。首先我们来进行布局
/* 让顶盒子居中显示 */
.accordian{
width:850px;
/* 850=(800+2)*5+20*2 */
margin:100px auto;
}
/* 配置li */
.accordian li{
list-style:none;
width:160px;
height: 320px;
float:left;
position:relative;
overflow:hidden;
border-left:2px solid rgba(255,255,255,.8);
}
/* 配置图像信息盒子 */
.accordian li .image_title{
position:absolute;
width:100%;
height:50px;
background-color:rgba(0,0,0,.5);
text-indent:2em;
line-height:50px;
bottom:0px;
left:0
}
/* 改变链接 */
.accordian a{
color:#fff;
text-decoration:none;
}然后我们来看关键，设置li的hover前后状态。我们需要改变的是li的宽度，hover之前都是160px，hover之后激活的li宽640px，其余的40px
/* hover之后所有的li宽改为40px */
.accordian ul:hover li{
width:40px;
}
/* hover之后激活的li宽为640px，注意这两个设置有先后顺序 */
.accordian ul li:hover{
width:640px;
}同时，我们需要给li增加transition。
.accordian li{
/* 之前的代码省略 */
/* 新增transition属性 */
transition:all 2s;
}这样我们就完成了整个效果，为了优化效果，我们增加了hover前后的图像滤镜，不幸的是这个效果只有webkit内核认识，为了代码的未来兼容性我们还是增加了标准属性（虽说现在暂时没有用），代码如下。
.accordian ul:hover li{
width:40px;
-webkit-filter:grayscale(.8);
filter:grayscale(.8);
}
.accordian ul li:hover{
width:640px;
-webkit-filter:grayscale(0) hue-rotate(300deg);
filter:grayscale(0) hue-rotate(300deg);
}好的，整个CSS文件如下。
.accordian{
width:850px;
margin:100px auto;
}
.accordian li{
float:left;
list-style:none;
width:160px;
height：320px;
transition:all 2s;
position:relative;
overflow:hidden;
border-left:2px solid rgba(255,255,255,.8);
box-shadow:0px 0px 20px rgba(0,0,0,0.8);
}
.accordian ul:hover li{
width:40px;
-webkit-filter:grayscale(.8);
filter:grayscale(.8);
}
.accordian ul li:hover{
width:640px;
-webkit-filter:grayscale(0) hue-rotate(300deg);
filter:grayscale(0) hue-rotate(300deg);
}
.accordian li .image_title{
position:absolute;
width:100%;
height:50px;
background-color:rgba(0,0,0,.5);
text-indent:2em;
line-height:50px;
bottom:0px;
left:0
}
.accordian a{
color:#fff;
text-decoration:none;
}
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------
原文：http://blog.csdn.net/whqet/article/details/19750019