.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>艺龙</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#box {
margin: 50px auto;
1205px;
}
#box li {
position: relative;
float: left;
200px;
height: 260px;
cursor: pointer;
}
#box li .shadow {
position: absolute;
100%;
height: 100%;
background: rgba(0, 0, 0, .2);
}
#box li .text {
position: absolute;
left: 0;
right: 0;
margin: 30px auto 0;
40px;
font-size: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<ul id="box">
<li style="background:url(images/1.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">园林酒店</div>
</li>
<li style="background:url(images/2.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">设计师酒店</div>
</li>
<li style="background:url(images/3.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">青年旅社</div>
</li>
<li style="background:url(images/4.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">特色客栈</div>
</li>
<li style="background:url(images/5.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">海岛酒店</div>
</li>
<li style="background:url(images/6.jpg) center no-repeat;">
<div class="shadow"></div>
<div class="text">海外温泉</div>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script>
$('#box li').mouseover(function () {
$(this).stop(true).animate({
400
}).children().css('display', 'none').end().siblings().stop(true).animate({160}).children().css('display', 'block');
});
$('#box').mouseout(function () {
$(this).children().animate({ 200}).children().css('display', 'block');
});
</script>
</body>
</html>
图片更换即可