css实现手风琴效果

<style>
     *{margin:0;padding:0;border:0;}
     ul,li{list-style-type:none;}
     a{font-size:20px;color:#fff;font-weight:bold;line-height:50px;text-decoration:none;}
     body{background:#319CC7;font-family: arial, verdana, tahoma;}
     .out{width:760px;height:433px;margin:100px auto;overflow:hidden;
                            box-shadow:0 0 10px 1px rgba(0,0,0,0.25);
                            -o-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);
                            -webkit-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);
                            -moz-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);
                        }
     .in{width:2000px;}
     .in li{position:relative;display:block;float:left;border:1px solid #BBBBBB;width:158px;
                            box-shadow:0 0 25px 10px rgba(0,0,0,0.25);
                            -o-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);
                            -webkit-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);
                            -moz-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);
                            transition:all  0.5s;
                            -o-transition:all  0.5s;
                            -webkit-transition:all  0.5s;
                            -moz-transition:all  0.5s;
                        }
     .in img{display:block;}
     .attention{width:600px;height:50px;position:absolute;background:rgba(0,0,0,0.5);bottom:0;}
     .attention a{display:block;cursor:pointer;}
      ul:hover li{width:38px;}
      ul li:hover{width:598px;}
      .gray{position:absolute;z-index:-1;}
</style>
///////////////////////////////////////////////////////////////////

<div class='out'>
     <ul class='in'>
         <li>
             <div class='attention'>
                <a href='###' title='马尔代夫'>马尔代夫</a>
             </div>
             <img src="mda.jpg"/>
         </li>
         <li>
             <div class='attention'>
                 <a href='###' title='惠州建筑'>惠州建筑</a>

             </div>
             <img src="mda.jpg"/>
         </li>
         <li>
             <div class='attention'>
                 <a href='###' title='平寨水库'>平寨水库</a>

             </div>
             <img src="mda.jpg"/>
         </li>
         <li>
             <div class='attention'>
                 <a href='###' title='瑞士风光'>瑞士风光</a>

             </div>
             <img src="mda.jpg"/>
         </li>
         <li>
             <div class='attention'>
                 <a href='###' title='蓝色海洋'>蓝色海洋</a>

             </div>
             <img src="mda.jpg"/>
         </li>
     </ul>
 </div>