模仿淘宝上鼠标移动到商品图片时，出现的文字效果。
1、效果图
鼠标移动到粉红色的区域，则出现黄色部分。
2、代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/lobal.css"/>
<style>
.box1{
/*定义父级的大小，设置高度为图片高度，便于隐藏文字部分*/
width: 210px;
height: 200px;
background: blue;
position: relative;/*overflow: hidden;隐藏文字部分*/
overflow: hidden;/*隐藏超出的部分，就是隐藏蒙版部分*/
}
.box1_cont{
height: 200px;
height: 200px;
background: palevioletred;
color: #fff;
}
.mb{
/*创建一个蒙版*/
height: 100px;
width: 210px;
background:rgba(255,255,0,0.5);
position: absolute;/*定好蒙版一开始在的位置*/
bottom:-100px;/*距离box1底部的距离为mb自身的高*/
left: 0;
transition: all linear 0.5s;/*设置蒙版的上升动画效果*/
}
.box1:hover .mb{
bottom: 0;/*将蒙版底部位置上移,与父级box1底部对齐*/
}
.box2{
width: 210px;
background: peachpuff;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1_cont">我是父容器里面的div</div>
<div class="mb">
<a href=""><span>呵呵你们在飞洒的开发</span></a>
</div>
</div>
<div class="box2">
<span>由于box1设置了overflow，mb没有占用位置</span>
</div>
</body>
</html>
2017-09-23
时间： 2025-01-08 23:02:28