CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大，效果似乎没有js好。。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大</title>
<style>
*{
padding:0;
margin:0;
}
body{
padding-top: 100px;
}
li{
list-style: none;
height: 260px;
}
ul{
width:1200px;
height:250px;
overflow:hidden;
margin: 0 auto;
}
li{
float:left;
position: relative;
width:200px;
-webkit-transition: width 0.05s ease-out;
-moz-transition: width 0.05s ease-out;
-ms-transition: width 0.05s ease-out;
-o-transition: width 0.05s ase-out;
transition: width 0.05s ease-out;
}
.mask_b{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.3);
}
.mask_b:hover{
background: none;
}
.text{
color: #fff;
width: 30px;
margin: 0 auto;
display: block;
font: 30px/30px Microsoft Yahei;
position: relative;
padding: 30px 0 0 0;
}
li:hover{
width:400px;
}
ul:hover li:not(:hover){
width:160px;
}
ul:hover li:hover .text{
display: none;
}
.pic-auto{
height: 100%;
}
.pic-auto1{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold1.jpg) no-repeat center 0;
}
.pic-auto2{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold2.jpg) no-repeat center 0;
}
.pic-auto3{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold3.jpg) no-repeat center 0;
}
.pic-auto4{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold4.jpg) no-repeat center 0;
}
.pic-auto5{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold5.jpg) no-repeat center 0;
}
.pic-auto6{
background: url(http://img.elongstatic.com/index/ifold/20150120_ifold6.jpg) no-repeat center 0;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<div class="mask_b">
<span class="text">园林酒店</span>
</div>
<div class="pic-auto pic-auto1"></div>
</a>
</li>
<li>
<a href="#">
<div class="mask_b">
<span class="text">情侣酒店</span>
</div>
<div class="pic-auto pic-auto2"></div>
</a>
</li>
<li>
<a href="#">
<div class="mask_b">
<span class="text">设计师酒店</span>
</div>
<div class="pic-auto pic-auto3"></div>
</a>
</li>
<li>
<a href="#">
<div class="mask_b">
<span class="text">青年旅社</span>
</div>
<div class="pic-auto pic-auto4"></div>
</a>
</li>
<li>
<a href="#">
<div class="mask_b">
<span class="text">特色客栈</span>
</div>
<div class="pic-auto pic-auto5"></div>
</a>
</li>
<li>
<a href="#">
<div class="mask_b">
<span class="text">海岛酒店</span>
</div>
<div class="pic-auto pic-auto6"></div>
</a>
</li>
</ul>
</body>
</html>
