- CSS3中,鼠标触碰图片,滑动块展示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片动画</title>
<style type="text/css">
.box{
/* 设置盒子的大小 */
width: 600px;
height: 600px;
/* 居中 上端距离 */
margin: 10px auto 0;
border: 1px solid pink;
/* 相对定位 */
position: relative;
/* 初始时,隐藏 */
overflow: hidden;
}
.box img{
/* 设置图片的大小 */
width: 600px;
height: 600px;
}
.box .pic_info{
/* 设置背景大小,即宽、高 */
width: 600px;
height: 200px;
/* 背景颜色、透明度 */
background:rgba(0,0,0,0.5);
/* 控制字体颜色 */
color: #fff;
/* 绝对定位 */
position: absolute;
left: 0;
/* 定位在图片的低端,即与图片的顶端相对的距离 */
top:600px;
/* 移动的方向、速度、过渡方式 */
transition: all 500ms ease;
}
.box:hover .pic_info{
/* 鼠标移动时,背景色移动,距离图片顶端相聚400px */
top: 400px;
}
</style>
</head>
<body>
<div class="box">
<img src="4.jpg" alt="图片">
<div class="pic_info">图片说明:这是一个风景图</div>
</div>
</body>
</html>