<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
/* 去除li的默认样式 */
li{
list-style: none;
}
/* 去除a的下划线 */
a{
text-decoration: none;
}
/* 清除img撑大3像素问题 */
img{
display: block;
}
body{
overflow: hidden;
background-color: white;
}
ul{
margin: auto;
margin-top: 100px;
width: 805px;
height: 320px;
/* 溢出隐藏 */
overflow: hidden;
display: flex;
/* 盒子阴影 */
box-shadow: 2px 2px 5px 5px ;
}
ul li {
/* 关键点一:当没有鼠标悬停时,正常宽度为160px */
width: 160px;
border-left: 1px solid black;
position: relative;
/* 过渡动画,不会的详见我的博客 css3过渡属性*/
transition: 0.5s;
box-shadow: -2px 0 5px 1px;
}
/* 关键点二:当ul上有鼠标悬停时所有的li宽度都变为40px */
ul:hover li{
width: 40px;
}
/* 关键点三 :当某个li上有鼠标悬停时这个li的宽度为640px*/
ul li:hover{
width: 640px;
}
/* 设置图片下方半透明黑框以及字体 */
ul li a{
display: block;
width: 640px;
position: absolute;
bottom: 0;
padding: 20px;
color: white;
font-size: 30px;
text-align: left;
background-color: rgb(0,0,0,0.5);
}
</style>
</head>
<body>
<ul>
<li><img src="img/img1.jpg" alt=""><a href="">功 夫 熊 猫</a></li>
<li><img src="img/img2.jpg" alt=""><a href="">玩 具 总 动 员</a></li>
<li><img src="img/img3.jpg" alt=""><a href="">外 星 人</a></li>
<li><img src="img/img4.jpg" alt=""><a href="">飞 屋 历 险 记</a></li>
<li><img src="img/img5.jpg" alt=""><a href="">汽 车 总 动 员</a></li>
</ul>
</body>
运行结果:
码字不易,点个赞吧~~~