<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>